首页html打开页面弹出模态框，点击同意后，模态框关闭进入页面的具体代码

html打开页面弹出模态框，点击同意后，模态框关闭进入页面的具体代码

时间: 2023-05-12 09:06:19 浏览: 121

以下是一个简单的示例代码，可以在 HTML 页面中打开模态框，点击同意后关闭模态框并进入页面： ``` <!DOCTYPE html> <html> <head> <title>Modal Dialog Example</title> <style> .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 600px; } .modal-buttons { display: flex; justify-content: flex-end; margin-top: 20px; } .modal-buttons button { margin-left: 10px; } </style> </head> <body> <div class="modal" id="myModal"> <div class="modal-content"> <h2>Terms and Conditions</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, sapien vel ultricies malesuada, velit nunc bibendum justo, vel bibendum velit nunc id velit. Sed euismod, sapien vel ultricies malesuada, velit nunc bibendum justo, vel bibendum velit nunc id velit.</p> <div class="modal-buttons"> <button id="btnAgree">Agree</button> <button id="btnDisagree">Disagree</button> </div> </div> </div> <script> var modal = document.getElementById("myModal"); var btn = document.getElementById("btnAgree"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> </body> </html> ``` 在这个示例中，我们使用了一个包含两个按钮的模态框，用户需要点击“Agree”按钮才能关闭模态框并进入页面。模态框的样式可以通过 CSS 进行自定义，JavaScript 代码则负责控制模态框的显示和隐藏。

阅读全文