JS如何实现在弹出窗口中加载页面

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

效果演示

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

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

var _divMask;var _divBox;function ShowMask() {var divMask = $(\'<div></div>\').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 = $(\"<div></div>\").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 = $(\"<p></p>\").css({\"width\": (width - 20) / 2,\"float\": \"left\",\"padding\": \"5px\",\"margin\": \"0\"}).text(title).appendTo(divBox);var pClose = $(\"<p></p>\").css({\"width\": (width - 20) / 2,\"float\": \"left\",\"text-align\": \"right\",\"padding\": \"5px\",\"margin\": \"0\"}).appendTo(divBox);var aClose = $(\"<a></a>\").css({\"color\": \"black\",\"text-decoration\": \"none\"}).attr(\"href\", \"javascript:CloseBox();\").text(\"关 闭\").appendTo(pClose);var hr = $(\"<hr/>\").css({\"margin\": \"0\",\"border\": \"1px solid gray\"}).appendTo(divBox);var iframeContainer = $(\"<iframe></iframe>\").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();}}

下载

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章: