Javascript年齡驗證彈出窗口

由於我對JavaScript的知識不足，我創建了一個年齡驗證彈出窗口，幫助我的朋友在線教程&。Javascript年齡驗證彈出窗口

檢查在線 - 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>

來源

2013-10-28 arifix

這是一個*很多* HTML的。考慮削減它，讓我們有更輕鬆的時間來幫助你。 – Bucket

鏈接演示是否可以安全工作？ –

你需要做一個異步回調（來呈現您的彈出功能）的內容後，已加載 - DOM準備就緒或加載所有內容時（可能太長）

這裏

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

看看你的代碼將需要像

function renderMyPopup() { 
// implementation in here 
}

那麼這裏的異步回調

onload = function() { 
    renderMyPopup() 
}

小幅改組的東西..如果你使用jQuery，有更簡單的方法看到這裏

$(document).ready shorthand

來源

2013-10-28 19:14:12 splig

Javascript年齡驗證彈出窗口

回答

相關問題