CreatePopup替换

Question

使用常规JavaScript或JQuery我想替换createPopup（）方法，如本文所述：

A universal createPopup() replacement?

但我想使用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

    }
}

Answer 1

您可以将javascript setter和getters与defineProperties结合使用，以实现您的目标。

＆＃13;

＆＃13;

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.";

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;