彈出窗口，加載頁面。彈出窗口初始位置為居中。可在關閉窗口時，回調主頁面按鈕。要求jquery。

效果演示

首先，演示主窗口兩個按鈕作用。然后，演示關閉彈出窗口時，調用主窗口的兩個按鈕。

主要代碼（時間倉促，沒加注釋，不過代碼很簡單，就是創(chuàng)建幾個元素拼在一起，每個元素都用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(); }}

下載

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。