javascript - 具有良好 iFrame 支持的 Vanilla JS Modal

Question

您好，我正在尝试寻找具有 iFrame 支持的优秀现代 Vanilla Javascript 模态/lytebox，基本上我有如下链接:

<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. 普通 JS(无依赖)
2. 由 href 标签决定的 iframe 内容
3. 积极维护，最好在 Github 上
4. 模态标记不需要手动嵌入页面

Answer 1

有趣的是，看看我们如何以一种无需脚本即可优雅降级的方式完成您的 iframe 操作。 anchor 标记属性可以完成大部分繁重的工作。

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