Vanilla JS режимное с хорошей Iframe поддержки

Question

Привет Im пытается пытается выследить хороший современный Vanilla Javascript модального/lytebox с поддержкой IFrame, по существу, у меня есть I количество ссылок, как показано ниже:

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

То, что я хочу для запуска модального содержимого iframe без необходимости встраивать что-либо, кроме JS/CSS, на страницу (то есть без изменения модальности)

HighslideJS (http://highslide.com/examples/iframe.html) отвечает основным требованиям (хотя он не имеет современного вида и не является открытым исходным кодом) Кто-нибудь знает какие-либо альтернативы?

У меня не было смотреть на эту ссылку http://planetozh.com/projects/lightbox-clones/ хотя список выглядит довольно старый и только HighSlideJS отвечает моим требованиям в этом списке

Так что мои основные требования:

1. Vanilla JS (нет зависимостей)
2. Iframe Содержимое определяется HREF тега
3. активно поддерживается, в идеале на Github
4. Модальные разметки не нужно быть ручным ly embedded на стр.

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> 

Лично я считаю, что лучший легкий подход к диалогам - использовать что-то редкое, как код ниже. Они не часто требуют многого и поэтому на самом деле не требуют многого, чтобы «поддерживать».

Fiddle 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});