CreatePopup替换

Question

Using regular JavaScript or JQuery I want to replace the createPopup() method like done in this post:

A universal createPopup() replacement?

but I want to use a Div instead of an iFrame. I don't need anything fancy just a simple div which can be styled.

The problem with using a Div is that I have a lot of existing code like this which I would like to remain untouched eg

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

In the new createPopup() method below, is there a way to return an object that has the properties document.body.innerHTML to style the Div and the existing code can remain untouched.

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

    // TODO return div object

    }
}

Answer 1

You can use javascript setters and getters in combination with defineProperties to pull off what you are trying to do.

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