CreatePopup 替换答案

【问题标题】：CreatePopup replacementCreatePopup 替换
【发布时间】：2016-01-19 07:26:02
【问题描述】：

使用常规 JavaScript 或 JQuery 我想替换 createPopup() 方法，就像在这篇文章中所做的那样：

但我想使用 Div 而不是 iFrame。我不需要任何花哨的东西，只需要一个可以设置样式的简单 div。

使用 Div 的问题是我有很多这样的现有代码，我希望保持不变，例如

var popup = window.createPopup();
oPopup.document.body.innerHTML = "Click outside <strong>popup</strong> to close.";

在下面的新createPopup() 方法中，有没有一种方法可以返回一个具有document.body.innerHTML 属性的对象来设置Div 的样式并且现有代码可以保持不变。

if(!window.createPopup){
  window.createPopup = function() {

    // TODO return div object

    }
}

【问题讨论】：

看起来您想模仿 iframe 的某些功能（具有某些属性，例如 document.body.innerHTML），但不想使用 iframe 对吧？
您可以轻松创建一个函数，该函数将返回一个具有相同属性的对象，但我猜 createPopup 方法会立即将弹出窗口呈现给用户？向“oPopup.document.body.innerHTML”添加内容会自动更新现有显示的对话框？似乎内容的自动更新会很困难，我认为只有最新版本的 ECMA 脚本才允许属性上的“观察者”。不过不研究就不确定。
您应该尝试用 Div 替换链接的 createPopup() 替换，什么对您不起作用？

标签： javascript jquery browser

【解决方案1】：

您可以将 javascript setter 和 getter 与 defineProperties 结合使用来完成您正在尝试做的事情。

if(!window.createPopup){
  window.createPopup = (function() {
    // build our object
    var o = {
      document: {
        body: {
          _innerHTML: ''
        }
      }
    };

    // build the popup
    o.document.body._outer = document.createElement('div');
    o.document.body._inner = document.createElement('div');
    o.document.body._outer.className = 'modal';
    o.document.body._inner.className = 'inner';
    // attach popup
    o.document.body._outer.appendChild(o.document.body._inner);
    document.body.appendChild(o.document.body._outer);

    // add a property for innerHTML
    Object.defineProperties(o.document.body, {
      'innerHTML': {
        get: function () { return this._innerHTML; },
        set: function (x) { 
          this._innerHTML = x;
          this._inner.innerHTML = this._innerHTML;
        }
      }
    });

    // return the object
    return o;
  });
}

var oPopup = window.createPopup();
oPopup.document.body.innerHTML = "Click outside <strong>popup</strong> to close.";

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.5);
}

.modal .inner {
  padding: 2em;
  background: #fff;
  border: 1px solid #eee;
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

【讨论】：

谢谢约瑟夫，这正是我所需要的，而且做得很好。谢谢一百万！