Javascript 年龄验证弹出窗口

Question

由于我对 JavaScript 的了解不多，我通过帮助一些在线教程和我 friend 的 e 创建了一个年龄验证弹出窗口。

实时查看- http://www.arif-khan.net/project/popup/

我的问题是我想在加载页面内容后加载/显示此弹出窗口，但不知道该怎么做。

代码-

<script type="text/javascript">
 function confirmAge(){
var d = new Date();
//var time_stmp = Math.round(d.getTime()/1000);
var now_us = d.getTime();


var myDate=document.getElementById('day').value +"-"+ document.getElementById('mon').value +"-"+ document.getElementById('yer').value;
myDate=myDate.split("-");
var newDate=myDate[1]+"/"+myDate[0]+"/"+myDate[2];
var date_us=new Date(newDate).getTime();

var age_us=(now_us-date_us)/(1000*356*24*3600);


if(age_us<18){
    alert("You must be 18 years of age to see this site.");
    return false;
}
else
    document.getElementById('ac-wrapper').style.display="none"; 

   }
</script>

CSS-

<style>
#ac-wrapper {
position            : absolute;
top                 : 0;
left                : 0;
width               : 100%;
height              : 820px;
background: rgba(255,255,255,.6);
z-index             : 1001;
}
#popup{
 width: 555px;
height: 375px;
background: #FFFFFF;
border: 5px solid #000;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
 box-shadow: #64686e 0px 0px 3px 3px;
-moz-box-shadow: #64686e 0px 0px 3px 3px;
-webkit-box-shadow: #64686e 0px 0px 3px 3px;
position: relative;
top: 150px; left: 375px;
 }
 #popup_logo{
position: relative;
left: 130px; top: 30px;
 }
 #popup_form{
text-align: center;
 }
 #popup_submit{
width: 120px;
height: 47px;
background: url(images/Enter-button.png) no-repeat;
cursor: pointer;
border: 0px;
 }
 p{
font: bold 20px Tahoma;
color: #000;
text-align: center;
 }
</style>

HTML-

    <div id="ac-wrapper">
      <div id="popup"> <img src="images/store_logo.png" alt="D elicious Liquid Vapor" id="popup_logo"><br />
        <br />
        <br />
        <br />
        <p>To play with the bull, you must be 21 years of age.<br />
          Please enter your birth date...</p>
        <br />
        <div id="popup_form">
          <select name="birthmonth" id='mon'>
            <option value="1">January</option>
            ......................
            <option value="12">December</option>
          </select>
          <select name="birthday" id='day'>
            <option value="1">1</option>
            <option value="2">2</option>
            .....................
            <option value="31">31</option>
          </select>
          <select name="birthyear" id="yer">
            <option value="2007">2013</option>
            ..............
            <option value="1900">1900</option>
          </select>
          <br />
          <br />
          <input type="button" id="popup_submit" name="submit" value="" onClick="confirmAge()" />
        </div>
      </div>
    </div>

Answer 1

您需要在内容加载后执行异步回调(到呈现弹出窗口的函数)- 在 DOM 准备就绪时或在加载所有内容时(这可能太长)

看这里

http://javascript.info/tutorial/onload-ondomcontentloaded

你的代码需要稍微重组一下

function renderMyPopup() {
 // implementation in here 
}

然后这里的异步回调

onload = function() {
    renderMyPopup()
}

...如果您使用 jQuery，有更简单的方法可以做到这一点 看这里

$(document).ready shorthand