Question

我从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(&quot;warning&quot;)">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>

Answer 1

我认为这就是你要找的东西。我将jQuery和boostrap <script>s添加到文档的<head>。我还删除了white spaces中的所有bootstrap <script> tag。

您不需要添加类show，因为它会自动添加。但是，您需要remove show class并添加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>

JS无法关闭叠加页面

1 个答案: