成人在线亚洲_国产日韩视频一区二区三区_久久久国产精品_99国内精品久久久久久久

您的位置:首頁(yè)技術(shù)文章
文章詳情頁(yè)

JS如何實(shí)現(xiàn)在彈出窗口中加載頁(yè)面

瀏覽:103日期:2024-04-10 18:30:11

彈出窗口,加載頁(yè)面。彈出窗口初始位置為居中??稍陉P(guān)閉窗口時(shí),回調(diào)主頁(yè)面按鈕。要求jquery。

效果演示

首先,演示主窗口兩個(gè)按鈕作用。然后,演示關(guān)閉彈出窗口時(shí),調(diào)用主窗口的兩個(gè)按鈕。JS如何實(shí)現(xiàn)在彈出窗口中加載頁(yè)面

主要代碼(時(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)。

標(biāo)簽: JavaScript
相關(guān)文章: