本文實例為大家分享了JavaScript實現彈出窗口的具體代碼，供大家參考，具體內容如下
思路
1、總體使用兩個div，一個作為底層展示，一個做為彈出窗口；
2、兩個窗口獨立進行CSS設計，通過display屬性進行設置現實與隱藏，此處建議使用display屬性而不是visibility屬性，visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間，影響布局；
3、在js內設計兩個onclick事件，分別指定函數，分別為開啟彈窗和關閉彈窗。
一、設置兩個div
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<html><title>彈出窗口</title><head> <meta charset="UTF-8"></head><body> // 底層div <div id="popLayer"> </div> // 彈出層div <div id="popDiv"> </div></body></html> |
二、對兩個div進行獨立CSS設置，彈出窗口display設為none
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<html><title>彈出窗口</title><head> <meta charset="UTF-8"> <style type="text/css"> body{ background-color: cyan; } #popDiv{ display: none; background-color: crimson; z-index: 11; width: 600px; height: 600px; position:fixed; top:0; right:0; left:0; bottom:0; margin:auto; } </style></head><body> // 底層div <div id="popLayer"> <button onclick="">彈窗</button> </div> // 彈出層div <div id="popDiv"> <div class="close"> // 關閉按鈕超鏈接 <a href="" onclick="">關閉</a> </div> <p>此處為彈出窗口</p> </div></body></html> |
三、定義并設置彈出按鈕和關閉窗口函數
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<script type="text/javascript"> function popDiv(){ // 獲取div元素 var popBox = document.getElementById("popDiv"); var popLayer = document.getElementById("popLayer"); // 控制兩個div的顯示與隱藏 popBox.style.display = "block"; popLayer.style.display = "block"; } function closePop(){ // 獲取彈出窗口元素 let popDiv = document.getElementById("popDiv"); popDiv.style.display = "none"; }</script> |
四、將函數設置到onclick事件中
|
1
2
|
<button onclick="popDiv();">彈窗</button><a href="javascript:void(0)" onclick="closePop()">關閉</a> |
五、設置關閉鏈接CSS和pop界面的其余CSS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<style type="text/css"> /* 關閉鏈接樣式 */ #popDiv .close a { text-decoration: none; color: #2D2C3B; } /* 彈出界面的關閉鏈接 */ #popDiv .close{ text-align: right; margin-right: 5px; background-color: #F8F8F8; } #popDiv p{ text-align: center; font-size: 25px; font-weight: bold; }</style> |
六、整體代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
<html><title>彈出窗口</title><head> <meta charset="UTF-8"> <script type="text/javascript"> function popDiv(){ // 獲取div元素 var popBox = document.getElementById("popDiv"); var popLayer = document.getElementById("popLayer"); // 控制兩個div的顯示與隱藏 popBox.style.display = "block"; popLayer.style.display = "block"; } function closePop(){ // 獲取彈出窗口元素 let popDiv = document.getElementById("popDiv"); popDiv.style.display = "none"; } </script> <style type="text/css"> body{ background-color: cyan; } #popDiv{ display: none; background-color: crimson; z-index: 11; width: 600px; height: 600px; position:fixed; top:0; right:0; left:0; bottom:0; margin:auto; } /* 關閉按鈕樣式 */ #popDiv .close a { text-decoration: none; color: #2D2C3B; } /* 彈出界面的關閉按鈕 */ #popDiv .close{ text-align: right; margin-right: 5px; background-color: #F8F8F8; } #popDiv p{ text-align: center; font-size: 25px; font-weight: bold; } </style></head><body> <div id="popLayer"> <button onclick="popDiv();">彈窗</button> </div> <div id="popDiv"> <div class="close"> <a href="javascript:void(0)" onclick="closePop()">關閉</a> </div> <p>此處為彈出窗口</p> </div></body></html> |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/qq_44027696/article/details/110904686
