国外主机测评 - 国外VPS，国外服务器，国外云服务器，测评及优惠码
HTML实现弹窗的方式有很多种，这里我将介绍两种常见的方法：使用JavaScript和CSS。,方法一：使用JavaScript,1、创建一个HTML文件，popup.html,2、在文件中添加以下代码：,3、保存文件并在浏览器中打开，点击“显示弹窗”按钮，即可看到弹窗效果，点击“关闭弹窗”按钮或点击弹窗外的空白区域，弹窗将消失。,方法二：使用CSS,1、创建一个HTML文件，popup.html,2、在文件中添加以下代码：,3、保存文件并在浏览器中打开，点击“显示弹窗”按钮，即可看到弹窗效果，点击“关闭弹窗”按钮或点击弹窗外的空白区域，弹窗将消失。,
,<!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; left: 50%; top: 50%; transform: translate(50%, 50%); backgroundcolor: white; border: 1px solid black; padding: 20px; zindex: 100; } </style> </head> <body> <button onclick=”showPopup()”>显示弹窗</button> <div class=”popup” id=”popup”> <h3>这是一个弹窗</h3> <p>这里是弹窗的内容。</p> <button onclick=”hidePopup()”>关闭弹窗</button> </div> <script> function showPopup() { document.getElementById(‘popup’).style.display = ‘block’; } function hidePopup() { document.getElementById(‘popup’).style.display = ‘none’; } </script> </body> </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; left: 50%; top: 50%; transform: translate(50%, 50%); backgroundcolor: white; border: 1px solid black; padding: 20px; zindex: 100; } .overlay { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; backgroundcolor: rgba(0, 0, 0, 0.5); zindex: 99; } </style> </head> <body> <button onclick=”showPopup()”>显示弹窗</button> <div class=”overlay” id=”overlay”></div> <div class=”popup” id=”popup”> <h3>这是一个弹窗</h3> <p>这里是弹窗的内容。</p> <button onclick=”hidePopup()”>关闭弹窗</button> </div> <script> function showPopup() { document.getElementById(‘popup’).style.display = ‘block’; document.getElementById(‘overlay’).style.display = ‘block’; } function hidePopup() { document.getElementById(‘popup’).style.display = ‘none’; document.getElementById(‘overlay’).style.display = ‘none’; } </script> </body> </html>,
html如何实现弹窗
版权声明：本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称：《html如何实现弹窗》
文章链接：https://zhuji.vsping.com/464096.html
本站资源仅供个人学习交流，请于下载后24小时内删除，不允许用于商业用途，否则法律问题自行承担。
文章名称：《html如何实现弹窗》
文章链接：https://zhuji.vsping.com/464096.html
本站资源仅供个人学习交流，请于下载后24小时内删除，不允许用于商业用途，否则法律问题自行承担。
