JS无法关闭重叠页面
[英]JS not working to close overlay page
问题描述
我从JS开始，我的代码有一个小问题（我认为）。
我正在尝试创建一个叠加同意页面，但是我的YES（按钮）似乎无法正常工作。 当按YES时，它将关闭覆盖并显示网站内容。 有人可以帮我解决吗？
与往常一样，这可能是一个小细节。
function openDialog(id) { document.getElementById(id).className += "show"; document.documentElement.style.overflow = "hidden"; } function closeDialog(id) { document.getElementById(id).className = "warning"; document.documentElement.style.overflow = "visible"; } openDialog("warning");
body, html { overflow: hidden; height: 100%; margin: 0; } .consent-overlay { position: fixed; z-index: 999; top: 0; left: 0; right: 0; bottom: 0; } .consentpage { background: #000015; height: 100%; background-position: center; background-size: cover; position: relative; color: #f8f8f8; font-family: 'Raleway', monospace; } .consent-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .consent-content h1 { text-transform: uppercase; font-size: 4.8rem; font-weight: 600; letter-spacing: .1rem; padding: 20px; } .consent-content p { font-size: 2.4rem; font-weight: 800; text-transform: uppercase; } .button { text-decoration: none; display: inline-block; font-size: 40px; cursor: pointer; padding: 0px; }
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> </head> <body> <div id="warning" class="consent-overlay show"> <div class="consentpage"> <div class="consent-content"> <div> <div> <h1>AVISO</h1> <p>Este website exibe contéudo explícito!</p> <div class="button"> <button class="btn btn-success" onclick="closeDialog("warning")">Tenho mais de 18 anos</button> <button class="btn btn-danger" onclick="location.href='https://www.webnode.com.br';">Tenho menos de 18 anos</button> </div> </div> </div> </div> </div> </div> </body> </html>
1 个解决方案
解决方案1
-1 已采纳 2018-01-01 19:27:57
我认为这就是您想要的。 我在文档的<head>中添加了jQuery和boostrap <script>s 。 我还删除了bootstrap <script> tag中的所有white spaces 。
您无需添加类show因为它会自动添加自身。 但是，您确实需要remove show类并添加hide类。
这是代码：
function openDialog() { document.documentElement.style.overflow = "hidden"; } function closeDialog() { document.getElementById("warning").classList.remove( "show" ) document.getElementById("warning").classList.add("hide"); } openDialog();
body, html { overflow: hidden; height: 100%; margin: 0; } .consent-overlay { position: fixed; z-index: 999; top: 0; left: 0; right: 0; bottom: 0; } .consentpage { background: #000015; height: 100%; background-position: center; background-size: cover; position: relative; color: #f8f8f8; font-family: 'Raleway', monospace; } .consent-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .consent-content h1 { text-transform: uppercase; font-size: 4.8rem; font-weight: 600; letter-spacing: .1rem; padding: 20px; } .consent-content p { font-size: 2.4rem; font-weight: 800; text-transform: uppercase; } .button { text-decoration: none; display: inline-block; font-size: 40px; cursor: pointer; padding: 0px; }
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div id="warning" class="consent-overlay show"> <div class="consentpage"> <div class="consent-content"> <div> <div> <h1>AVISO</h1> <p>Este website exibe contéudo explícito!</p> <div class="button"> <button class="btn btn-success" onclick="closeDialog()">Tenho mais de 18 anos</button> <button class="btn btn-danger" onclick="location.href='https://www.webnode.com.br';">Tenho menos de 18 anos</button> </div> </div> </div> </div> </div> </div> <!-- Example content --> <div> <div>This is some content here 1.</div> <div>This is some content here 2.</div> </div> </body> </html>
如何通过单击页面来关闭覆盖
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.