如何使用 JavaScript 和“是/否”按钮来弹出年龄验证窗口？

Question

我对 JavaScript 不太熟悉，我正在尝试为 Square Space 网站设置年龄验证弹出窗口。我在使用“是/否”按钮功能时遇到问题，并且不知道如何使它们工作。这个想法是，当单击“是”时，弹出窗口就会消失，并且该选择将在该会话的其余部分中被记住。单击“否”后，该站点将退出。任何帮助是极大的赞赏。我将以下代码粘贴到站点范围的标头代码注入中：jQuery(document).ready(function($) {  if (sessionStorage.getItem('advertOnce') !== 'true') {    //sessionStorage.setItem('advertOnce','true');    $('.box').show();  } else {    $('.box').hide();  };  $('#btn-alpha').click(function() {    sessionStorage.setItem('advertOnce', 'true');    $('.box').hide();  });  $('#btn-beta').click(function() {    window.location.href = 'http://google.com/';  });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><main>  <article class="box">    <div class="box-left">    </div>    <div class="box-right">      <h3>Age Verification</h3>      <p>This site requires you to be 21 years or older to enter. </p>      <p>By clicking 'YES', I certify that I am 21 years or older.</p>      <a href="#" class="btn btn-alpha" id="refresh-page">YES</a>      <a href="#" class="btn btn-beta" id="refresh-page">NO</a>    </div>  </article>  <div class="overlay-verify"></div></main>

Answer 1

您将按钮类定位为 JavaScript 中的 id。将这两行中的#a替换为：.

$('#btn-alpha').click(function() {    // $('.btn-alpha')

和

$('#btn-beta').click(function() {     // $('.btn-beta')

它现在应该可以工作了，尽管这两个按钮也具有id与评论中提到的相同的功能。Id 必须是唯一的，因此页面上最多有一个元素具有特定的 id。

这是更正后的代码（我用 sessionStorage 注释掉了部分）：

jQuery(document).ready(function($) {

  /*

    if (sessionStorage.getItem('advertOnce') !== 'true') {

      //sessionStorage.setItem('advertOnce','true');

    } else {

      $('.box').hide();

    };

  */

  

  $('.box').show();

  

  $('.btn-alpha').click(function() {

    //sessionStorage.setItem('advertOnce', 'true');

    $('.box').hide();

  });

  $('.btn-beta').click(function() {

    window.location.href = 'http://google.com/';

  });

});

/*----------------------------------------------   

-Defualt to border-box

-----------------------------------------------  */

*,

*:before,

*:after {

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

html,

body {

  font-family: helvetica;

  font-size: 100%;

  margin: 0;

  padding: 0;

  font-weight: 400;

  font-family: Raleway;

  line-height: 1.4;

}

/*----------------------------------------------   

--Fluid body sizing

-----------------------------------------------  */

body {

  font-size: 100%;

}

@media (min-width: 32em) {

  body {

    font-size: 110%;

  }

}

@media (min-width: 54em) {

  body {

    font-size: 111%;

  }

}

@media (min-width: 74em) {

  body {

    font-size: 115%;

  }

}

@media (min-width: 96em) {

  body {

    font-size: 135%;

  }

}

a.btn {

  background-color: #e3c827;

  color: #000;

  text-decoration: none;

  display: inline-block;

  letter-spacing: 0.1em;

  padding: 0.5em 0em;

}

a.btn.btn-beta {

  background-color: #800000;

}

.overlay-verify {

  background: #000;

  position: fixed;

  height: 100%;

  width: 100%;

  top: 0;

  left: 0;

  z-index: 1;

}

.box {

  background: #fff;

  position: relative;

  left: 0;

  right: 0;

  top: 20%;

  bottom: 0;

  margin: 0 auto;

  z-index: 9;

  width: 70%;

  height: 40%;

  display: table;

}

.box .box-left,

.box .box-right {

  width: 100%;

  position: relative;

  text-align: center;

  padding: 5%;

}

@media (min-width: 54em) {

  .box .box-left,

  .box .box-right {

    display: table-cell;

    vertical-align: middle;

    width: 50%;

  }

}

.box .box-left p,

.box .box-right p {

  position: relative;

  z-index: 3;

}

.box .box-left {

  background: url(https://www.distillery.news/wp-content/uploads/2018/03/84743_Hochatown-2.jpg) 50% 50%;

  background-size: cover;

}

.box .box-left img {

  position: relative;

  z-index: 1;

  width: 9em;

}

.box .box-left:after {

  content: '';

  position: relative;

  z-index: 0;

  top: 0;

  left: 0;

  height: 100%;

  width: 100%;

  background-color: rgba(0, 0, 0, 0);

}

.box .box-right {

  background-color: #000000;

  text-align: center;

}

.box .box-right h3 {

  color: #fff;

  text-transform: uppercase;

  letter-spacing: 0.07em;

  border-bottom: 1px solid #eee;

  padding-bottom: 1em;

  margin: 0 auto;

}

.box .box-right p {

  color: #fff;

}

.box .box-right small {

  color: #fff;

}

.box .box-right .btn {

  font-weight: 600;

  letter-spacing: 0.2em;

  padding: 0.9em 1em 0.7em;

  margin: 1em auto;

  display: block;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<main>

  <article class="box">

    <div class="box-left">

    </div>

    <div class="box-right">

      <h3>Age Verification</h3>

      <p>This site requires you to be 21 years or older to enter. </p>

      <p>By clicking 'YES', I certify that I am 21 years or older.</p>

      <a href="#" class="btn btn-alpha" id="refresh-page-yes">YES</a>

      <a href="#" class="btn btn-beta" id="refresh-page-no">NO</a>

    </div>

  </article>

  <div class="overlay-verify"></div>

</main>

Answer 2

这是一个工作示例（堆栈片段可能不会保存 sessionStorage，因此请在此处查看：https: //jsfiddle.net/v358z1yt/

jQuery(document).ready(function($) {

  if (sessionStorage.getItem('advertOnce') !== 'true') {

    $('.box').show();

  } else {

    $('.box').hide();

  };

  $('.btn-alpha').click(function() {

    sessionStorage.setItem('advertOnce', 'true');

    $('.box').hide();

  });

  $('.btn-beta').click(function() {

    window.location.href = 'http://google.com/';

  });

});

/*----------------------------------------------   

-Defualt to border-box

-----------------------------------------------  */

*,

*:before,

*:after {

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

html,

body {

  font-family: helvetica;

  font-size: 100%;

  margin: 0;

  padding: 0;

  font-weight: 400;

  font-family: Raleway;

  line-height: 1.4;

}

/*----------------------------------------------   

--Fluid body sizing

-----------------------------------------------  */

body {

  font-size: 100%;

}

@media (min-width: 32em) {

  body {

    font-size: 110%;

  }

}

@media (min-width: 54em) {

  body {

    font-size: 111%;

  }

}

@media (min-width: 74em) {

  body {

    font-size: 115%;

  }

}

@media (min-width: 96em) {

  body {

    font-size: 135%;

  }

}

a.btn {

  background-color: #e3c827;

  color: #000;

  text-decoration: none;

  display: inline-block;

  letter-spacing: 0.1em;

  padding: 0.5em 0em;

}

a.btn.btn-beta {

  background-color: #800000;

}

.overlay-verify {

  background: #000;

  position: fixed;

  height: 100%;

  width: 100%;

  top: 0;

  left: 0;

  z-index: 1;

}

.box {

  background: #fff;

  position: relative;

  left: 0;

  right: 0;

  top: 20%;

  bottom: 0;

  margin: 0 auto;

  z-index: 9;

  width: 70%;

  height: 40%;

  display: table;

}

.box .box-left,

.box .box-right {

  width: 100%;

  position: relative;

  text-align: center;

  padding: 5%;

}

@media (min-width: 54em) {

  .box .box-left,

  .box .box-right {

    display: table-cell;

    vertical-align: middle;

    width: 50%;

  }

}

.box .box-left p,

.box .box-right p {

  position: relative;

  z-index: 3;

}

.box .box-left {

  background: url(https://www.distillery.news/wp-content/uploads/2018/03/84743_Hochatown-2.jpg) 50% 50%;

  background-size: cover;

}

.box .box-left img {

  position: relative;

  z-index: 1;

  width: 9em;

}

.box .box-left:after {

  content: '';

  position: relative;

  z-index: 0;

  top: 0;

  left: 0;

  height: 100%;

  width: 100%;

  background-color: rgba(0, 0, 0, 0);

}

.box .box-right {

  background-color: #000000;

  text-align: center;

}

.box .box-right h3 {

  color: #fff;

  text-transform: uppercase;

  letter-spacing: 0.07em;

  border-bottom: 1px solid #eee;

  padding-bottom: 1em;

  margin: 0 auto;

}

.box .box-right p {

  color: #fff;

}

.box .box-right small {

  color: #fff;

}

.box .box-right .btn {

  font-weight: 600;

  letter-spacing: 0.2em;

  padding: 0.9em 1em 0.7em;

  margin: 1em auto;

  display: block;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<main>

  <article class="box">

    <div class="box-left">

    </div>

    <div class="box-right">

      <h3>Age Verification</h3>

      <p>This site requires you to be 21 years or older to enter. </p>

      <p>By clicking 'YES', I certify that I am 21 years or older.</p>

      <a href="#" class="btn btn-alpha">YES</a>

      <a href="#" class="btn btn-beta">NO</a>

    </div>

  </article>

  <div class="overlay-verify"></div>

</main>

问题是您使用#btn-alphaand#btn-beta作为选择器，但您需要使用类名。

另外，我从你的按钮中删除了重复的 ID。那是不行的。

Answer 3

将它们视为带有“.”的类 而不是“#”似乎修复了“是”按钮，但是，第二个按钮不起作用。另一个问题的进一步研究（window.location.href 不起作用）让我添加

return false;

在 window.location.href 之后，但这仍然不起作用。想法？

jQuery(document).ready(function($) {

  if (sessionStorage.getItem('advertOnce') !== 'true') {

    $('.box').show();

  } else {

    $('.box').hide();

  };

  $('.btn-alpha').click(function() {

    sessionStorage.setItem('advertOnce', 'true');

    $('.box').hide();

  });

  $('.btn-beta').click(function() {

    window.location.href = "https://www.google.com/";

return false;

  });

});