香草JS模態具有良好的iFrame支持

Question

你好我試着去試圖追查有關iFrame支持良好的現代香草的Javascript莫代爾/ lytebox，基本上我有我的聯繫號碼如下圖所示：

<a class="edit-html" href="/iframe.html?para=123"></a> 

那我想觸發帶有iframe內容的模式，而不必在頁面中嵌入JS/CSS以外的任何東西（即無模式標記）

HighslideJS（http://highslide.com/examples/iframe.html）符合主要要求（雖然它沒有現代外觀，不是開源的）有誰知道任何替代品？ （

1. 香草JS無依賴：

   我看了一下這個鏈接http://planetozh.com/projects/lightbox-clones/雖然名單看起來很老，只有HighSlideJS符合該列表

   所以我的主要要求是對我的要求）

由href標記
2. 積極維護確定
3. iframe中的內容，理想地在Github
4. 模態標記並不需要是手動ly嵌入頁

Answer 1

有趣的是，試圖看看我們如何能夠以不會腳本的方式優雅地降級，從而完成iframe的操作。錨標籤屬性可以完成大部分繁重的工作。

<a href="https://jsfiddle.net/rtoal/wvp4scLL/" target="iframe1" onclick="modal.show()">Link</a> 
<a href="https://jsfiddle.net/exdev/sxGN3/" target="iframe1" onclick="modal.show()">Link</a> 

<iframe name="iframe1" src="about:blank""></iframe> 

就我個人而言，我認爲最好的對話框輕量級方法是使用像下面的代碼稀疏的東西。他們通常不需要做太多的工作，因此在「維護」方面並不需要太多。

小提琴here。

var Dialog = function(content, config){ 
    /* 
    content: selector, element, or text to wrap into dialog body 
    config object parameters: 
    modal: boolean, 
    dialogClass: text, 
    createCallBack, renderCallBack, showCallBack, hideCallBack, toggleCallBack: functions 
    */ 

    var self = this; 

    this.config = config || {}; 

    this.init = function(){ 
    //check for an element passed as content or a selector corresponding to an element 
    self.content = content.tagName ? content : document.querySelector(content); 
    if(! self.content){ 
     //otherwise content is text to be appended to the dialog body 
     self.content = document.createElement("div"); 
     self.content.innerText = content; 
    } 
    self.container = self.create(); 
    self.body.appendChild(self.content); 
    if(document.body){ 
     self.render(); 
    }else{ 
     document.body.addEventListener("load", self.render); 
    } 

    window.addEventListener("resize", function(){ 
     self.size(); 
    }) 

    return self; 
    } 

    this.create=function create(){ 
    self.container = document.createElement("div"); 
    self.dialog = document.createElement("div"); 
    self.head = document.createElement("h2"); 
    self.closeButton = document.createElement("button"); 
    self.body = document.createElement("div"); 
    self.head.innerText = self.config.headerText || ""; 
    self.dialog.appendChild(self.head); 
    self.dialog.appendChild(self.closeButton); 
    self.container.appendChild(self.dialog); 
    self.dialog.appendChild(self.body); 
    self.body.appendChild(self.content); 
    self.container.className = "dialog-container" + (self.config.modal ? " modal" : ""); 
    self.dialog.className = "dialog " + self.config.dialogClass || ""; 
    self.head.className = "dialog-head"; 
    self.body.className = "dialog-body"; 
    self.closeButton.className = "dialog-close"; 
    self.closeButton.innerText = self.config.closeButtonText || "close"; 
    self.closeButton.title = self.config.closeButtonText || "close"; self.closeButton.addEventListener("click", self.hide); 
    self.closeButton.setAttribute("type","button"); 
    self.checkCallBack(); 
    return self.container; 
    } 

    this.render = function render(){ 
    document.body.appendChild(self.container); 
    self.checkCallBack(arguments); 
    return self.dialog; 
    } 

    this.show = function(){ 
    setTimeout(function(){ 
     self.container.classList.add("visible"); 
     self.closeButton.focus(); 
     self.checkCallBack(arguments); 
     return self.container; 
    },0); 
    } 

    this.hide = function hide(){ 
    var iframe = self.dialog.querySelector("iframe"); 
    if(iframe){ 
     iframe.setAttribute("src","about:blank"); 
    } 
    self.container.classList.remove("visible"); 
    self.checkCallBack(arguments); 
    return self.container; 
    } 

    this.toggle = function(){ 
    if(self.dialog.classList.contains("visible")){ 
     self.hide(); 
    }else{ 
     self.show(); 
    } 
    self.checkCallBack(arguments); 
    return self.container; 
    } 

    this.size = function(){ 
    var padding = 80; 
    self.body.style.maxHeight = window.innerHeight - self.head.offsetHeight - padding + "px"; 
    console.log(self.body.style.maxHeight); 
    return self.body.style.maxHeight; 
    } 

    this.checkCallBack = function(args){ 
    var action = arguments.callee.caller.name, 
     callBackName = action + "CallBack", 
     args = Array.prototype.slice.call(args || []), 
     fn = self.config[callBackName]; 

    if(fn){ 
     args.unshift(action); 
     fn.apply(self, args); 
    } 

    return !!fn; 
    } 

    this.init(); 
} 

//sample usage 
var.modal = new Dialog("iframe", {modal: true});