html自动加载js弹出框,JS如何实现在弹出窗口中加载页面

弹出窗口，加载页面。弹出窗口初始位置为居中。可在关闭窗口时，回调主页面按钮。要求jquery。

效果演示

首先，演示主窗口两个按钮作用。然后，演示关闭弹出窗口时，调用主窗口的两个按钮。

主要代码(时间仓促，没加注释，不过代码很简单，就是创建几个元素拼在一起，每个元素都用var=标明了)

var _divMask;

var _divBox;

function ShowMask() {

var divMask = $('

.attr("id", "divMask")

.css({

"position": "absolute",

"left": "0",

"top": "0",

"width": "100%",

"height": "100%",

"backgroundColor": "gray",

"opacity": "0.4"

}).appendTo("body");

_divMask = divMask;

return divMask;

}

function ShowBox(title, url, width, height) {

ShowMask();

var divBox = $("

.attr("id", "divBox")

.css({

"position": "absolute",

"top": (($(document).height() - height) / 2) < 0 ? 0 : (($(document).height() - height) / 2),

"left": (($(document).width() - width) / 2),

"width": width,

"height": height,

"border": "2px solid gray",

"backgroundColor": "white"

})

.appendTo("body");

var pTitle = $("

.css({

"width": (width - 20) / 2,

"float": "left",

"padding": "5px",

"margin": "0"

})

.text(title)

.appendTo(divBox);

var pClose = $("

.css({

"width": (width - 20) / 2,

"float": "left",

"text-align": "right",

"padding": "5px",

"margin": "0"

})

.appendTo(divBox);

var aClose = $("")

.css({

"color": "black",

"text-decoration": "none"

})

.attr("href", "javascript:CloseBox();")

.text("关 闭")

.appendTo(pClose);

var hr = $("

---

")

.css({

"margin": "0",

"border": "1px solid gray"

})

.appendTo(divBox);

var iframeContainer = $("")

.attr("id", "divContainer")

.css({

"width": width,

"height": height - 13 - pTitle.height(),

"float": "left",

"overflow": "auto",

"border": "0"

})

.attr("src", url)

.appendTo(divBox);

_divBox = divBox;

//divBox.draggable({ handle: "p" });

}

function CloseBox(btn) {

if (_divMask == null) {

if (btn != null && btn != '') {

parent.document.getElementById(btn).click();

}

$(parent.document.getElementById("divMask")).remove();

$(parent.document.getElementById("divBox")).remove();

}

else {

_divMask.remove();

_divBox.remove();

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。