JS如何實(shí)現(xiàn)在彈出窗口中加載頁(yè)面
彈出窗口,加載頁(yè)面。彈出窗口初始位置為居中??稍陉P(guān)閉窗口時(shí),回調(diào)主頁(yè)面按鈕。要求jquery。
效果演示
首先,演示主窗口兩個(gè)按鈕作用。然后,演示關(guān)閉彈出窗口時(shí),調(diào)用主窗口的兩個(gè)按鈕。
主要代碼(時(shí)間倉(cāng)促,沒加注釋,不過代碼很簡(jiǎn)單,就是創(chuàng)建幾個(gè)元素拼在一起,每個(gè)元素都用var=標(biāo)明了)
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('關(guān) 閉') .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(); }}
下載
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. java實(shí)現(xiàn)圖形化界面計(jì)算器2. javascript設(shè)計(jì)模式 ? 建造者模式原理與應(yīng)用實(shí)例分析3. IntelliJ IDEA設(shè)置條件斷點(diǎn)的方法步驟4. Spring-Richclient 0.1.0 發(fā)布5. IntelliJ Idea2017如何修改緩存文件的路徑6. IDEA的Mybatis Generator駝峰配置問題7. 解決idea中yml文件不識(shí)別的問題8. IIS Express 取代 ASP.NET Development Server的配置方法9. Python使用oslo.vmware管理ESXI虛擬機(jī)的示例參考10. 詳解Python模塊化--模塊(Modules)和包(Packages)
