如何創(chuàng)建一個(gè)JavaScript彈出DIV窗口層的效果
更新時(shí)間：2013年09月25日 15:13:56 作者：
我將用最通俗的語(yǔ)言和最簡(jiǎn)潔的代碼給大家演示如何創(chuàng)建一個(gè)JavaScript彈出DIV窗口層的效果
在本教程中，我將用最通俗的語(yǔ)言和最簡(jiǎn)潔的代碼給大家演示如何創(chuàng)建一個(gè)JavaScript彈出DIV窗口層的效果。
創(chuàng)建一個(gè)彈出DIV窗口可能是現(xiàn)在網(wǎng)站/網(wǎng)頁(yè)制作中最常碰到的問題之一。傳統(tǒng)的JavaScript彈窗已經(jīng)不適合目前網(wǎng)站的設(shè)計(jì)理念了，理由有二：首先，不友好——生硬的彈出對(duì)話框且伴隨著“哐”的一聲對(duì)用戶體驗(yàn)是個(gè)很大的挑戰(zhàn)；其次，兼容性不夠強(qiáng)——有相當(dāng)多的瀏覽器屏蔽了這種JS的Alert()方法。于是，一個(gè)良好用戶體驗(yàn)的網(wǎng)站需要一種更合理的解決方案——使用很少的HTML代碼，很少的CSS代碼和幾行的JavaScript代碼來模擬瀏覽器默認(rèn)的彈出窗口（即替換掉默認(rèn)的Alert()界面和功能）。
實(shí)現(xiàn)原理：
首先，我們將彈出框中的內(nèi)容放置在一個(gè)特殊的DIV層中，然后默認(rèn)隱藏它（即初始不可見，使用CSS即可實(shí)現(xiàn)）。當(dāng)用戶執(zhí)行某個(gè)動(dòng)作時(shí)——比如點(diǎn)擊某個(gè)鏈接或者將鼠標(biāo)光標(biāo)移動(dòng)到某個(gè)鏈接上——我們將之前設(shè)置好的隱藏層顯示在所有頁(yè)面元素的最上層（將使用JS操作實(shí)現(xiàn)）。此外，我們還將在彈出DIV窗口中設(shè)置一個(gè)按鈕來執(zhí)行——當(dāng)用戶點(diǎn)擊此按鈕時(shí)關(guān)閉窗口的功能。
實(shí)現(xiàn)過程：
就如我上面提到的，我們首先需要?jiǎng)?chuàng)建一個(gè)特殊的DIV層，然后我們將彈出窗口的內(nèi)容放在這個(gè)DIV層里面。在這里，我們將其ID命名為“popupcontent ”以區(qū)別于其他DIV層。
<div id="popupcontent">這是一個(gè)DIV彈窗效果!</div>
彈出窗口的CSS修飾代碼：
接下來，讓我們給上面已創(chuàng)建好的這個(gè)DIV彈出層進(jìn)行CSS美化。其中最重要的幾個(gè)參數(shù)分別是：overflow（內(nèi)容溢出）, visibility（可見性） 和position（定位方式）。同時(shí)我也給這個(gè)窗口效果添加了很多其他代碼，但這些只是用于美化，使這個(gè)窗口更絢麗。所以，我們最后定義的CSS代碼形如：
#popupcontent{
position: absolute;
visibility: hidden;
overflow: hidden;
border:1px solid #CCC;
background-color:#F9F9F9;
border:1px solid #333;
padding:5px;
}
從上面CSS代碼中的紅色部分可以看出：這個(gè)DIV層初始默認(rèn)狀態(tài)是不可見的。
大家可以根據(jù)需要對(duì)以上代碼進(jìn)行美化，但請(qǐng)務(wù)必保留position，visibility，overflow三個(gè)屬性。
JavaScript代碼用于觸發(fā)和顯示彈出窗口：
這可能是本教程最重要最有趣的地方了。我們接下來會(huì)編寫2個(gè)過程函數(shù)分別用于顯示和隱藏上面那個(gè)DIV彈窗。當(dāng)然，這兩個(gè)函數(shù)之中會(huì)包含一些主體邏輯。
過程函數(shù)中需要順序包含的邏輯：
計(jì)算JavaScript彈出窗口在屏幕上的顯示位置（定位）；
在彈出窗口中添加一個(gè)狀態(tài)欄（或按鈕），用于關(guān)閉打開狀態(tài)下的窗口；
顯示彈出窗口。
為了簡(jiǎn)單起見，本例中我們?cè)O(shè)置的顯示位置是Top：200，Left：200。即以瀏覽器內(nèi)容框的左上角為坐標(biāo)，向下偏移200PX，向左偏移200PX。
彈出窗口的大小我們可以在顯示函數(shù)的參數(shù)中進(jìn)行設(shè)置，包括兩個(gè)參數(shù)：窗口長(zhǎng)度和窗口寬度。
如果你需要將本例中的代碼進(jìn)行二次開發(fā)，有個(gè)地方需要特別注意，那就是獲取彈出窗口DIV層的DOM對(duì)象，我們可以通過下面這個(gè)getElementById函數(shù)來獲取ID名為“Popcontent”的DOM對(duì)象。
var popUp = document.getElementById("popupcontent");
在獲取這個(gè)（彈出窗口）DOM對(duì)象之后，我們可以在JS代碼中修改窗口的相對(duì)的位置和窗口大小。
popUp.style.top = "200px";//窗口距離瀏覽器內(nèi)容區(qū)最上方的偏移值
popUp.style.left = "200px";//窗口距離瀏覽器內(nèi)容區(qū)最左邊的偏移值
popUp.style.width = w + "px";//窗口的寬度
popUp.style.height = h + "px";//窗口的高度
接下來，我們需要給窗口添加一個(gè)“關(guān)閉”按鈕，用于在窗口開啟狀態(tài)下關(guān)閉這個(gè)窗口。要完美的實(shí)現(xiàn)這一功能，首先我們需要聲明一個(gè)全局變量，用于存儲(chǔ)彈出窗口DIV中的內(nèi)容。這是因?yàn)?，如果你在一個(gè)頁(yè)面中顯示多個(gè)內(nèi)容不同的彈出窗口，你不需要將按鈕重復(fù)的復(fù)制到這些DIV層中，這樣就簡(jiǎn)化了行為邏輯：
if (baseText == null) baseText = popUp.innerHTML;
popUp.innerHTML = baseText +
"<div id=\"statusbar\"><button onclick=\"hidePopup();\">Close window <button></div>";
最后一個(gè)需要注意的地方是這個(gè)“關(guān)閉”按鈕的定位問題。這個(gè)很容易實(shí)現(xiàn)，設(shè)置一下這個(gè)按鈕對(duì)象的向上的空白邊即可（空白邊的數(shù)值設(shè)置成稍小于整個(gè)彈出窗口的DIV高度即可）。
至此，所有的行為邏輯講解完畢，最后的彈窗顯示函數(shù)的完整代碼如下：
var baseText = null;
function showPopup(w,h){
var popUp = document.getElementById("popupcontent");
popUp.style.top = "200px";
popUp.style.left = "200px";
popUp.style.width = w + "px";
popUp.style.height = h + "px";
if (baseText == null) baseText = popUp.innerHTML;
popUp.innerHTML = baseText + "<div id=\"statusbar\"><button onclick=\"hidePopup();
\">Close window<button></div>";
var sbar = document.getElementById("statusbar");
sbar.style.marginTop = (parseInt(h)-40) + "px";
popUp.style.visibility = "visible";
}
隱藏彈出窗口：
隱藏彈出窗口的過程就相當(dāng)簡(jiǎn)單了。只需要首先獲取彈出窗口那個(gè)DIV的DOM對(duì)象，然后將其屬性設(shè)置成“隱藏”即可。
function hidePopup(){
var popUp = document.getElementById("popupcontent");
popUp.style.visibility = "hidden";
}
拓展HTML代碼最終實(shí)現(xiàn)彈窗效果：
我們需要做的就是在某個(gè)鏈接或者按鈕的對(duì)應(yīng)事件上添加JS函數(shù)“showPopup() ”即可。
比如，需要在鼠標(biāo)移動(dòng)到某連接上時(shí)彈出窗口：
<a href="#" onmouseover="showPopup(300,200);" >Open popup</a>
需要在鼠標(biāo)點(diǎn)擊某個(gè)連接時(shí)彈出窗口：
<a href="#" onclick="showPopup(300,200);" >Open popup</a>
創(chuàng)建一個(gè)彈出DIV窗口可能是現(xiàn)在網(wǎng)站/網(wǎng)頁(yè)制作中最常碰到的問題之一。傳統(tǒng)的JavaScript彈窗已經(jīng)不適合目前網(wǎng)站的設(shè)計(jì)理念了，理由有二：首先，不友好——生硬的彈出對(duì)話框且伴隨著“哐”的一聲對(duì)用戶體驗(yàn)是個(gè)很大的挑戰(zhàn)；其次，兼容性不夠強(qiáng)——有相當(dāng)多的瀏覽器屏蔽了這種JS的Alert()方法。于是，一個(gè)良好用戶體驗(yàn)的網(wǎng)站需要一種更合理的解決方案——使用很少的HTML代碼，很少的CSS代碼和幾行的JavaScript代碼來模擬瀏覽器默認(rèn)的彈出窗口（即替換掉默認(rèn)的Alert()界面和功能）。
實(shí)現(xiàn)原理：
首先，我們將彈出框中的內(nèi)容放置在一個(gè)特殊的DIV層中，然后默認(rèn)隱藏它（即初始不可見，使用CSS即可實(shí)現(xiàn)）。當(dāng)用戶執(zhí)行某個(gè)動(dòng)作時(shí)——比如點(diǎn)擊某個(gè)鏈接或者將鼠標(biāo)光標(biāo)移動(dòng)到某個(gè)鏈接上——我們將之前設(shè)置好的隱藏層顯示在所有頁(yè)面元素的最上層（將使用JS操作實(shí)現(xiàn)）。此外，我們還將在彈出DIV窗口中設(shè)置一個(gè)按鈕來執(zhí)行——當(dāng)用戶點(diǎn)擊此按鈕時(shí)關(guān)閉窗口的功能。
實(shí)現(xiàn)過程：
就如我上面提到的，我們首先需要?jiǎng)?chuàng)建一個(gè)特殊的DIV層，然后我們將彈出窗口的內(nèi)容放在這個(gè)DIV層里面。在這里，我們將其ID命名為“popupcontent ”以區(qū)別于其他DIV層。
<div id="popupcontent">這是一個(gè)DIV彈窗效果!</div>
彈出窗口的CSS修飾代碼：
接下來，讓我們給上面已創(chuàng)建好的這個(gè)DIV彈出層進(jìn)行CSS美化。其中最重要的幾個(gè)參數(shù)分別是：overflow（內(nèi)容溢出）, visibility（可見性） 和position（定位方式）。同時(shí)我也給這個(gè)窗口效果添加了很多其他代碼，但這些只是用于美化，使這個(gè)窗口更絢麗。所以，我們最后定義的CSS代碼形如：
復(fù)制代碼 代碼如下:
#popupcontent{
position: absolute;
visibility: hidden;
overflow: hidden;
border:1px solid #CCC;
background-color:#F9F9F9;
border:1px solid #333;
padding:5px;
}
從上面CSS代碼中的紅色部分可以看出：這個(gè)DIV層初始默認(rèn)狀態(tài)是不可見的。
大家可以根據(jù)需要對(duì)以上代碼進(jìn)行美化，但請(qǐng)務(wù)必保留position，visibility，overflow三個(gè)屬性。
JavaScript代碼用于觸發(fā)和顯示彈出窗口：
這可能是本教程最重要最有趣的地方了。我們接下來會(huì)編寫2個(gè)過程函數(shù)分別用于顯示和隱藏上面那個(gè)DIV彈窗。當(dāng)然，這兩個(gè)函數(shù)之中會(huì)包含一些主體邏輯。
過程函數(shù)中需要順序包含的邏輯：
計(jì)算JavaScript彈出窗口在屏幕上的顯示位置（定位）；
在彈出窗口中添加一個(gè)狀態(tài)欄（或按鈕），用于關(guān)閉打開狀態(tài)下的窗口；
顯示彈出窗口。
為了簡(jiǎn)單起見，本例中我們?cè)O(shè)置的顯示位置是Top：200，Left：200。即以瀏覽器內(nèi)容框的左上角為坐標(biāo)，向下偏移200PX，向左偏移200PX。
彈出窗口的大小我們可以在顯示函數(shù)的參數(shù)中進(jìn)行設(shè)置，包括兩個(gè)參數(shù)：窗口長(zhǎng)度和窗口寬度。
如果你需要將本例中的代碼進(jìn)行二次開發(fā)，有個(gè)地方需要特別注意，那就是獲取彈出窗口DIV層的DOM對(duì)象，我們可以通過下面這個(gè)getElementById函數(shù)來獲取ID名為“Popcontent”的DOM對(duì)象。
復(fù)制代碼 代碼如下:
var popUp = document.getElementById("popupcontent");
在獲取這個(gè)（彈出窗口）DOM對(duì)象之后，我們可以在JS代碼中修改窗口的相對(duì)的位置和窗口大小。
復(fù)制代碼 代碼如下:
popUp.style.top = "200px";//窗口距離瀏覽器內(nèi)容區(qū)最上方的偏移值
popUp.style.left = "200px";//窗口距離瀏覽器內(nèi)容區(qū)最左邊的偏移值
popUp.style.width = w + "px";//窗口的寬度
popUp.style.height = h + "px";//窗口的高度
接下來，我們需要給窗口添加一個(gè)“關(guān)閉”按鈕，用于在窗口開啟狀態(tài)下關(guān)閉這個(gè)窗口。要完美的實(shí)現(xiàn)這一功能，首先我們需要聲明一個(gè)全局變量，用于存儲(chǔ)彈出窗口DIV中的內(nèi)容。這是因?yàn)?，如果你在一個(gè)頁(yè)面中顯示多個(gè)內(nèi)容不同的彈出窗口，你不需要將按鈕重復(fù)的復(fù)制到這些DIV層中，這樣就簡(jiǎn)化了行為邏輯：
復(fù)制代碼 代碼如下:
if (baseText == null) baseText = popUp.innerHTML;
popUp.innerHTML = baseText +
"<div id=\"statusbar\"><button onclick=\"hidePopup();\">Close window <button></div>";
最后一個(gè)需要注意的地方是這個(gè)“關(guān)閉”按鈕的定位問題。這個(gè)很容易實(shí)現(xiàn)，設(shè)置一下這個(gè)按鈕對(duì)象的向上的空白邊即可（空白邊的數(shù)值設(shè)置成稍小于整個(gè)彈出窗口的DIV高度即可）。
至此，所有的行為邏輯講解完畢，最后的彈窗顯示函數(shù)的完整代碼如下：
復(fù)制代碼 代碼如下:
var baseText = null;
function showPopup(w,h){
var popUp = document.getElementById("popupcontent");
popUp.style.top = "200px";
popUp.style.left = "200px";
popUp.style.width = w + "px";
popUp.style.height = h + "px";
if (baseText == null) baseText = popUp.innerHTML;
popUp.innerHTML = baseText + "<div id=\"statusbar\"><button onclick=\"hidePopup();
\">Close window<button></div>";
var sbar = document.getElementById("statusbar");
sbar.style.marginTop = (parseInt(h)-40) + "px";
popUp.style.visibility = "visible";
}
隱藏彈出窗口：
隱藏彈出窗口的過程就相當(dāng)簡(jiǎn)單了。只需要首先獲取彈出窗口那個(gè)DIV的DOM對(duì)象，然后將其屬性設(shè)置成“隱藏”即可。
復(fù)制代碼 代碼如下:
function hidePopup(){
var popUp = document.getElementById("popupcontent");
popUp.style.visibility = "hidden";
}
拓展HTML代碼最終實(shí)現(xiàn)彈窗效果：
我們需要做的就是在某個(gè)鏈接或者按鈕的對(duì)應(yīng)事件上添加JS函數(shù)“showPopup() ”即可。
比如，需要在鼠標(biāo)移動(dòng)到某連接上時(shí)彈出窗口：
<a href="#" onmouseover="showPopup(300,200);" >Open popup</a>
需要在鼠標(biāo)點(diǎn)擊某個(gè)連接時(shí)彈出窗口：
<a href="#" onclick="showPopup(300,200);" >Open popup</a>
您可能感興趣的文章:
- JS+CSS3制作炫酷的彈窗效果
- js調(diào)用父框架函數(shù)與彈窗調(diào)用父頁(yè)面函數(shù)的簡(jiǎn)單方法
- JS觸摸屏網(wǎng)頁(yè)版仿app彈窗型滾動(dòng)列表選擇器/日期選擇器
- 關(guān)于vue.js彈窗組件的知識(shí)點(diǎn)總結(jié)
- js彈出框、對(duì)話框、提示框、彈窗實(shí)現(xiàn)方法總結(jié)(推薦)
- js彈出div并顯示遮罩層
- js點(diǎn)擊彈出div層實(shí)現(xiàn)可拖曳的彈窗效果
- javascript 通過封裝div方式彈出div窗體
- html 鎖定頁(yè)面(js遮罩層彈出div效果)
- JS+CSS實(shí)現(xiàn)Div彈出窗口同時(shí)背景變暗的方法
- JS彈窗 JS彈出DIV并使整個(gè)頁(yè)面背景變暗功能的實(shí)現(xiàn)代碼
相關(guān)文章
uni-app如何頁(yè)面?zhèn)鲄?shù)的幾種方法總結(jié)
這篇文章主要介紹了uni-app如何頁(yè)面?zhèn)鲄?shù)的幾種方法總結(jié),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
javascript中的注釋使用與注意事項(xiàng)小結(jié)
在javascript中有兩種注釋方式,單行注釋與多行注釋。2011-09-09
這篇文章主要介紹了Postman的下載及安裝教程詳解,今天給大家介紹的這款網(wǎng)頁(yè)調(diào)試工具不僅可以調(diào)試簡(jiǎn)單的css、html、腳本等簡(jiǎn)單的網(wǎng)頁(yè)基本信息，它還可以發(fā)送幾乎所有類型的HTTP請(qǐng)求！需要的朋友可以參考下2018-10-10
IE中提供了一個(gè)fireEvent方法大概就是觸發(fā)某個(gè)事件發(fā)生的意思，以為是和onclick()一樣，看來是我自已為是了,有時(shí)間還要多看看javascript的細(xì)節(jié)啊,廣大網(wǎng)友也是啊2013-02-02
原生js實(shí)現(xiàn)頁(yè)面滾動(dòng)動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)頁(yè)面滾動(dòng)動(dòng)畫，使用了requestAnimationFrame，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感為興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要給大家介紹了關(guān)于es6中reduce的基本使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用es6具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
suggestion開發(fā)小結(jié)以及對(duì)鍵盤事件的總結(jié)（針對(duì)中文輸入法狀態(tài)）
suggestion開發(fā)小結(jié)以及對(duì)鍵盤事件的總結(jié)（針對(duì)中文輸入法狀態(tài)）,需要的朋友可以參考下。2011-12-12
本文主要為大家介紹了微信小程序中常用的幾個(gè)表單組件的使用方法，例如：button、CheckBox、input、form等，感興趣的可以了解一下2022-03-03
快速排序是一種平均性能非常優(yōu)秀的排序算法，在很多場(chǎng)合都會(huì)應(yīng)用到他，了解快速排序于對(duì)開放高效率的軟件有很重要的作用2013-12-12
這篇文章主要給大家介紹了關(guān)于uniapp?h5如何獲取用戶地理位置信息的相關(guān)資料,文中主要使用高德地圖,這里主要講h5實(shí)現(xiàn)獲取地理位置信息并定位功能,需要的朋友可以參考下2023-08-08