国外主机测评 - 国外VPS，国外服务器，国外云服务器，测评及优惠码
要创建一个带样式的弹窗，可以使用HTML、CSS和JavaScript，以下是一个简单的示例：,1、创建一个HTML文件，例如
popup.html，并添加以下内容：,2、保存文件后，用浏览器打开
popup.html，你将看到一个带有样式的弹窗，点击弹窗外的区域或关闭按钮可以关闭弹窗。,
,<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF8″> <meta name=”viewport” content=”width=devicewidth, initialscale=1.0″> <title>带样式的弹窗</title> <style> /* 弹窗背景 */ .popup { display: none; position: fixed; zindex: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; backgroundcolor: rgba(0, 0, 0, 0.4); } /* 弹窗内容 */ .popupcontent { backgroundcolor: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; } /* 关闭按钮 */ .close { color: #aaa; float: right; fontsize: 28px; fontweight: bold; } .close:hover, .close:focus { color: black; textdecoration: none; cursor: pointer; } </style> </head> <body> <!弹窗结构 > <div id=”myPopup” class=”popup”> <div class=”popupcontent”> <span class=”close”>×</span> <h2>弹窗标题</h2> <table> <tr> <th>小标题1</th> <td>单元表格内容1</td> </tr> <tr> <th>小标题2</th> <td>单元表格内容2</td> </tr> </table> </div> </div> <script> // 获取弹窗元素 var popup = document.getElementById(“myPopup”); // 获取关闭按钮元素 var closeBtn = document.getElementsByClassName(“close”)[0]; // 显示弹窗 function showPopup() { popup.style.display = “block”; } // 隐藏弹窗 function hidePopup() { popup.style.display = “none”; } // 当用户点击关闭按钮时，隐藏弹窗 closeBtn.onclick = function() { hidePopup(); } // 当用户点击弹窗外的区域时，隐藏弹窗 window.onclick = function(event) { if (event.target == popup) { hidePopup(); } } </script> </body> </html>,
html如何写带样式的弹窗
版权声明：本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称：《html如何写带样式的弹窗》
文章链接：https://zhuji.vsping.com/429326.html
本站资源仅供个人学习交流，请于下载后24小时内删除，不允许用于商业用途，否则法律问题自行承担。
文章名称：《html如何写带样式的弹窗》
文章链接：https://zhuji.vsping.com/429326.html
本站资源仅供个人学习交流，请于下载后24小时内删除，不允许用于商业用途，否则法律问题自行承担。
