国外主机测评 - 国外VPS，国外服务器，国外云服务器，测评及优惠码
设置弹窗样式的HTML代码如下：,
,<!DOCTYPE html> <html> <head> <title>弹窗样式设置</title> <style> /* 弹窗样式 */ .modal { display: none; /* 默认隐藏弹窗 */ position: fixed; /* 固定弹窗位置 */ zindex: 1; /* 设置弹窗层级 */ left: 0; top: 0; width: 100%; /* 宽度为100% */ height: 100%; /* 高度为100% */ overflow: auto; /* 内容溢出时显示滚动条 */ backgroundcolor: rgba(0,0,0,0.4); /* 背景颜色为半透明黑色 */ } /* 弹窗内容样式 */ .modalcontent { backgroundcolor: #fefefe; /* 背景颜色 */ margin: 15% auto; /* 水平居中，垂直距离顶部15% */ padding: 20px; /* 内边距 */ border: 1px solid #888; /* 边框 */ width: 80%; /* 宽度 */ maxwidth: 600px; /* 最大宽度 */ } /* 关闭按钮样式 */ .close { color: #aaa; /* 字体颜色 */ float: right; /* 向右浮动 */ fontsize: 28px; /* 字体大小 */ fontweight: bold; /* 字体加粗 */ } .close:hover, .close:focus { color: black; /* 鼠标悬停或聚焦时字体颜色 */ textdecoration: none; /* 去掉下划线 */ cursor: pointer; /* 鼠标指针变为手形 */ } </style> </head> <body> <!弹窗触发按钮 > <button id=”openModal”>打开弹窗</button> <!弹窗内容 > <div id=”myModal” class=”modal”> <div class=”modalcontent”> <span class=”close”>×</span> <p>这里是弹窗的内容。</p> </div> </div> <!JavaScript代码 > <script> // 获取弹窗元素和触发按钮元素 var modal = document.getElementById(“myModal”); var btn = document.getElementById(“openModal”); var span = document.getElementsByClassName(“close”)[0]; // 点击触发按钮打开弹窗 btn.onclick = function() { modal.style.display = “block”; } // 点击关闭按钮关闭弹窗并隐藏弹窗元素 span.onclick = function() { modal.style.display = “none”; } // 点击弹窗外部区域关闭弹窗并隐藏弹窗元素 window.onclick = function(event) { if (event.target == modal) { modal.style.display = “none”; } } </script> </body> </html>,
如何设置弹窗样式html
版权声明：本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称：《如何设置弹窗样式html》
文章链接：https://zhuji.vsping.com/469009.html
本站资源仅供个人学习交流，请于下载后24小时内删除，不允许用于商业用途，否则法律问题自行承担。
文章名称：《如何设置弹窗样式html》
文章链接：https://zhuji.vsping.com/469009.html
本站资源仅供个人学习交流，请于下载后24小时内删除，不允许用于商业用途，否则法律问题自行承担。
