目前，如果我选择一个年龄然后点击一个按钮，就会出现年龄验证弹出窗口。但我现在希望这个弹出窗口显示在网站上的任何其他内容之前。
如何在页面加载时让我的年龄验证弹出窗口工作，而不是先假设最小年龄为18岁时点击按钮？
这是我的笔，您可以看到：http://codepen.io/Sidney-Dev/pen/ALYRwo 这里是js：
( function( $ ) {
$(document) .ready(function(){
alert(' Here it is');
$.ageCheck = function(options) {
var settings = $.extend({
minAge : 21,
redirectTo : '',
redirectOnFail : '',
title : 'Age Verification',
copy : 'This Website requires you to be [21] years or older to enter. Please enter your Date of Birth in the fields below in order to continue:'
}, options);
var _this = {
month : '',
day : '',
year : '',
age : '',
errors : Array(),
setValues : function(){
var month = $('.ac-container .month').val();
var day = $('.ac-container .day').val();
_this.month = month;
_this.day = day.replace(/^0+/, ''); //remove leading zero
_this.year = $('.ac-container .year').val();
},
validate : function(){
_this.errors = [];
if (/^([0-9]|[12]\d|3[0-1])$/.test(_this.day) === false) {
_this.errors.push('Day is invalid or empty');
};
if (/^(19|20)\d{2}$/.test(_this.year) === false) {
_this.errors.push('Year is invalid or empty');
};
_this.clearErrors();
_this.displayErrors();
return _this.errors.length < 1;
},
clearErrors : function(){
$('.errors').html('');
},
displayErrors : function(){
var html = '<ul>';
for (var i = 0; i < _this.errors.length; i++) {
html += '<li><span>x</span>' + _this.errors[i] + '</li>';
}
html += '</ul>';
setTimeout(function(){$('.ac-container .errors').html(html);},200);
},
reCenter : function (b){
b.css("top", Math.max(0, (($(window).height() - (b.outerHeight() + 150)) / 2) +
$(window).scrollTop()) + "px");
b.css("left", Math.max(0, (($(window).width() - b.outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
},
buildHtml : function(){
var copy = settings.copy;
var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var html = '';
html += '<div class="ac-overlay"></div>';
html += '<div class="ac-container">';
html += '<h2>' + settings.title + '</h2>';
html += '<p>' + copy.replace('[21]','<strong>'+settings.minAge+'</strong>'); + '</p>';
html += '<div class="errors"></div>';
html += '<div class="fields"><select class="month">';
for(var i=0;i<months.length;i++){
html += '<option value="'+i+'">'+months[i]+'</option>';
}
html += '</select>';
html += '<input class="day" maxlength="2" placeholder="01" />';
html += '<input class="year" maxlength="4" placeholder="1989"/>';
html += '<button>Submit</button></div></div>';
$('body').append(html);
$('.ac-overlay').animate({
opacity: 0.8
}, 500, function() {
_this.reCenter($('.ac-container'));
$('.ac-container').css({opacity: 1});
});
$(".ac-container .day, .ac-container .year").focus(function(){
$(this).removeAttr('placeholder');
});
},
setAge : function(){
_this.age = '';
var birthday = new Date(_this.year, _this.month, _this.day);
var ageDifMs = Date.now() - birthday.getTime();
var ageDate = new Date(ageDifMs); // miliseconds from epoch
_this.age = Math.abs(ageDate.getUTCFullYear() - 1970);
},
setSessionStorage : function(key, val){
try {
sessionStorage.setItem(key,val);
return true;
} catch (e) {
return false;
}
},
handleSuccess : function(){
var successMsg = '<h3>Success!</h3><p>You are now being redirected back to the application...</p>';
$('.ac-container').html(successMsg);
setTimeout(function(){
$('.ac-container').animate({'top':'-350px'},200, function(){
$('.ac-overlay').animate({'opacity':'0'},500, function(){
if (settings.redirectTo !== '') {
window.location.replace(settings.redirectTo);
}else{
$('.ac-overlay, .ac-container').remove();
}
});
});
},2000);
},
handleUnderAge : function() {
var underAgeMsg = '<h3>Sorry, you are not old enough to view this site...</h3>';
$('.ac-container').html(underAgeMsg);
if (settings.redirectOnFail !== '') {
setTimeout(function(){
window.location.replace(settings.redirectOnFail);
},2000);
}
}
}; //end _this
if(sessionStorage.getItem("ageVerified") === "true"){
return false;
}
_this.buildHtml();
$('.ac-container button').on('click', function(){
_this.setValues();
if (_this.validate() === true) {
_this.setAge();
if(_this.age >= settings.minAge){
if(!_this.setSessionStorage("ageVerified", "true")){
console.log('sessionStorage not supported by your browser');
};
_this.handleSuccess();
}else{
_this.handleUnderAge();
}
}
});
$(window).resize(function() {
_this.reCenter($('.ac-container'));
setTimeout(function() {
_this.reCenter($('.ac-container'));
}, 500);
});
};
});
} )( jQuery );
HTML：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="agecheck.css" rel="stylesheet" />
<script src="jquery.agecheck.min.js"></script>
<script>
$(document).ready(function(){
var minAge = $('select').val();
$('select').on('change', function(){
minAge = $(this).val();
});
$('button').on('click', function(){
sessionStorage.clear();
$.ageCheck({minAge: minAge});
});
$.ageCheck({minAge: minAge});
});
</script>
<style>
.demo select {
border: 1px solid #ccc;
border-radius: 2px;
padding: 2px;
}
.demo h3 {
font-family:'Bree Serif', arial;
font-weight:bold;
font-size:30px;
text-align:center;
border-bottom:1px dashed #ccc;
padding:0 0 20px 0;
line-height:38px;
}
.demo p {
font-family: georgia, serif;
font-size:18px;
line-height:26px;
text-align:center;
margin-bottom:10px;
color:#ADADAD;
}
.demo button {
box-sizing: border-box;
display: inline-block;
margin-bottom: 10px;
margin-top:5px;
font-weight: bold;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
padding: 4px 20px 6px 20px;
font-size: 24px;
line-height: 1.5;
background:#8EB908;
color:#fff;
text-shadow:1px 1px 0 #84A51D;
font-family: 'Bree Serif', serif;
}
.demo button:hover{
box-sizing: border-box;
background:#82A711;
}
@media (max-width: 500px) {
.demo p {
font-size:12px;
line-height: 17px;
}
.demo h3 {
font-size:18px;
line-height:22px;
}
.demo button {
font-size:17px;
}
}
</style>
</head>
<body>
<div class="demo">
<h3>
<a style="text-decoration:none; color:#666;" href="http://michaelsoriano.com/jquery-plugin-check-user-age/">AgeCheck.js <span style="color:red;">Demo</span><br>jQuery Plugin for Checking user age</a></h3>
<div style="max-width:500px; padding:0; margin:0 auto;">
<p>
AgeCheck.js will automatically prompt to check your age. It will redirect back to this page on success. You can change the minimum age by selecting from the select options, and
re-trigger by clicking the big button below.
</p>
<p>
Oh, the plugin is also responsive - so resize the viewport. Aitte?
</p>
<p>
Minimum age:
<select name="age">
<option value="21">21</option>
<option value="20">20</option>
<option value="19">19</option>
<option value="18">18</option>
</select>
</p>
<p>
<button>Check My Age:</button>
</p>
<p>
Click <strong><a style="color:red" href="https://github.com/fearlessflyer/age-check">Here</a></strong> to go to the GitHub Repo.<br>
Click <strong><a style="color:red" href="http://michaelsoriano.com/jquery-plugin-check-user-age/">Here</a></strong> to go to the Documentation.
</p>
</div>
</div>
</body>
</html>
希望你能提供帮助。
答案 0 :(得分：2)
答案 1 :(得分：0)
您可以从此处使用备用代码。结帐full demo here...
<script>
$(function () {
$('#pop-up-content').firstVisitPopup({
cookieName : 'homepage',
showAgainSelector: '#show-message'
});
});
</script>