HTML 常见的JS弹窗

一、最简单的 JavaScript 弹窗代码实例

HTML代码

2. <button id="myBtn">打开弹窗button>
4. <div id="myModal" class="modal">
6. <div class="modal-content">
7. <span class="close">×span>
8. <p>弹窗中的文本...p>
9. div>
11. div>

CSS代码

1. /* 弹窗 (background) */
2. .modal {
3. display: none; /* 默认隐藏 */
4. position: fixed; /* 固定定位 */
5. z-index: 1; /* 设置在顶层 */
6. left: 0;
7. top: 0;
8. width: 100%;
9. height: 100%;
10. overflow: auto;
11. background-color: rgb(0,0,0);
12. background-color: rgba(0,0,0,0.4);
13. }
15. /* 弹窗内容 */
16. .modal-content {
17. background-color: #fefefe;
18. margin: 15% auto;
19. padding: 20px;
20. border: 1px solid #888;
21. width: 80%;
22. }
24. /* 关闭按钮 */
25. .close {
26. color: #aaa;
27. float: right;
28. font-size: 28px;
29. font-weight: bold;
30. }
32. .close:hover,
33. .close:focus {
34. color: black;
35. text-decoration: none;
36. cursor: pointer;
37. }

JS代码

1. // 获取弹窗
2. var modal = document.getElementById('myModal');
4. // 打开弹窗的按钮对象
5. var btn = document.getElementById("myBtn");
7. // 获取 元素，用于关闭弹窗
8. var span = document.querySelector('.close');
10. // 点击按钮打开弹窗
11. btn.onclick = function() {
12. modal.style.display = "block";
13. }
15. // 点击 (x), 关闭弹窗
16. span.onclick = function() {
17. modal.style.display = "none";
18. }
20. // 在用户点击其他地方时，关闭弹窗
21. window.onclick = function(event) {
22. if (event.target == modal) {
23. modal.style.display = "none";
24. }
25. }

展示效果

二、弹窗添加头部和底部

HTML代码

2. <button id="myBtn">打开弹窗button>
4. <div id="myModal" class="modal">
7. <div class="modal-content">
8. <div class="modal-header">
9. <span class="close">×span>
10. <h2>弹窗头部h2>
11. div>
12. <div class="modal-body">
13. <p>弹窗文本...p>
14. <p>弹窗文本...p>
15. div>
16. <div class="modal-footer">
17. <h3>弹窗底部h3>
18. div>
19. div>
20. div>

CSS代码

1. /* 弹窗 (background) */
2. .modal {
3. display: none; /* 默认隐藏 */
4. position: fixed;
5. z-index: 1;
6. padding-top: 100px;
7. left: 0;
8. top: 0;
9. width: 100%;
10. height: 100%;
11. overflow: auto;
12. background-color: rgb(0,0,0);
13. background-color: rgba(0,0,0,0.4);
14. }
16. /* 弹窗内容 */
17. .modal-content {
18. position: relative;
19. background-color: #fefefe;
20. margin: auto;
21. padding: 0;
22. border: 1px solid #888;
23. width: 80%;
24. box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
25. -webkit-animation-name: animatetop;
26. -webkit-animation-duration: 0.4s;
27. animation-name: animatetop;
28. animation-duration: 0.4s
29. }
31. /* 添加动画 */
32. @-webkit-keyframes animatetop {
33. from {top:-300px; opacity:0}
34. to {top:0; opacity:1}
35. }
37. @keyframes animatetop {
38. from {top:-300px; opacity:0}
39. to {top:0; opacity:1}
40. }
42. /* 关闭按钮 */
43. .close {
44. color: white;
45. float: right;
46. font-size: 28px;
47. font-weight: bold;
48. }
50. .close:hover,
51. .close:focus {
52. color: #000;
53. text-decoration: none;
54. cursor: pointer;
55. }
57. .modal-header {
58. padding: 2px 16px;
59. background-color: #5cb85c;
60. color: white;
61. }
63. .modal-body {padding: 2px 16px;}
65. .modal-footer {
66. padding: 2px 16px;
67. background-color: #5cb85c;
68. color: white;
69. }

JS代码（JS代码一般用作弹窗的开关，功能点和普通弹窗相同）

1. // 获取弹窗
2. var modal = document.getElementById('myModal');
4. // 打开弹窗的按钮对象
5. var btn = document.getElementById("myBtn");
7. // 获取 元素，用于关闭弹窗 that closes the modal
8. var span = document.getElementsByClassName("close")[0];
10. // 点击按钮打开弹窗
11. btn.onclick = function() {
12. modal.style.display = "block";
13. }
15. // 点击 (x), 关闭弹窗
16. span.onclick = function() {
17. modal.style.display = "none";
18. }
20. // 在用户点击其他地方时，关闭弹窗
21. window.onclick = function(event) {
22. if (event.target == modal) {
23. modal.style.display = "none";
24. }
25. }

展示效果

三、在底部显示的弹窗

HTML代码

3. <button id="myBtn">打开弹窗button>
6. <div id="myModal" class="modal">
9. <div class="modal-content">
10. <div class="modal-header">
11. <span class="close">×span>
12. <h2>弹窗头部h2>
13. div>
14. <div class="modal-body">
15. <p>弹窗文本...p>
16. <p>弹窗文本...p>
17. div>
18. <div class="modal-footer">
19. <h3>弹窗底部h3>
20. div>
21. div>
23. div>

CSS代码

1. /* 弹窗 */
2. .modal {
3. display: none; /* 默认隐藏 */
4. position: fixed;
5. z-index: 1;
6. left: 0;
7. top: 0;
8. width: 100%;
9. height: 100%;
10. overflow: auto;
11. background-color: rgb(0,0,0);
12. background-color: rgba(0,0,0,0.4);
13. -webkit-animation-name: fadeIn;
14. -webkit-animation-duration: 0.4s;
15. animation-name: fadeIn;
16. animation-duration: 0.4s
17. }
19. /* 弹窗内容 */
20. .modal-content {
21. position: fixed;
22. bottom: 0;
23. background-color: #fefefe;
24. width: 100%;
25. -webkit-animation-name: slideIn;
26. -webkit-animation-duration: 0.4s;
27. animation-name: slideIn;
28. animation-duration: 0.4s
29. }
31. /* 关闭按钮 */
32. .close {
33. color: white;
34. float: right;
35. font-size: 28px;
36. font-weight: bold;
37. }
39. .close:hover,
40. .close:focus {
41. color: #000;
42. text-decoration: none;
43. cursor: pointer;
44. }
46. .modal-header {
47. padding: 2px 16px;
48. background-color: #5cb85c;
49. color: white;
50. }
52. .modal-body {padding: 2px 16px;}
54. .modal-footer {
55. padding: 2px 16px;
56. background-color: #5cb85c;
57. color: white;
58. }
60. /* 添加动画 */
61. @-webkit-keyframes slideIn {
62. from {bottom: -300px; opacity: 0}
63. to {bottom: 0; opacity: 1}
64. }
66. @keyframes slideIn {
67. from {bottom: -300px; opacity: 0}
68. to {bottom: 0; opacity: 1}
69. }
71. @-webkit-keyframes fadeIn {
72. from {opacity: 0}
73. to {opacity: 1}
74. }
76. @keyframes fadeIn {
77. from {opacity: 0}
78. to {opacity: 1}
79. }

JS代码

1. // 获取弹窗
2. var modal = document.getElementById('myModal');
4. // 打开弹窗的按钮对象
5. var btn = document.getElementById("myBtn");
7. // 获取 元素，用于关闭弹窗 that closes the modal
8. var span = document.getElementsByClassName("close")[0];
10. // 点击按钮打开弹窗
11. btn.onclick = function() {
12. modal.style.display = "block";
13. }
15. // 点击 (x), 关闭弹窗
16. span.onclick = function() {
17. modal.style.display = "none";
18. }
20. // 在用户点击其他地方时，关闭弹窗
21. window.onclick = function(event) {
22. if (event.target == modal) {
23. modal.style.display = "none";
24. }
25. }

展示效果

第一次写文章，不会导入视频