ページのjQueryポップアップ

Question

現在のところ、年齢を選択してボタンをクリックすると、年齢確認のポップアップが表示されます。ただし、このポップアップはサイトの他のものよりも前に表示されます。

最小年齢が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> 

あなたが助けることができると思います。

Answer 1

この関数は、レンダリングの前にポップアップが表示されます

$（ウィンドウ）.LOAD（関数（）{}）

の内側にあなたの関数を呼び出します。

This might help you