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符合我对该列表的要求

所以我的主要要求是：

Vanilla JS（无依赖性）
iframe内容由href标签
积极维护，最好是在Github上
模态标记不需要手动嵌入页面

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

具有良好iFrame支持的Vanilla JS Modal

1 个答案: