JQuery всплывающее окно загрузки

Question

Я хочу показать всплывающее окно при загрузке страницы, и в этом всплывающем окне есть поле флажка, я хочу, чтобы эта страница была видна, только если флажок установлен.Проблема в том, что он хорошо работает с функцией щелчка, но не может заставить его работать с флажком.Это мой код

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function() {  

    var id = '#dialog';

    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    //Set heigth and width to mask to fill up the whole screen
    $('#mask').css({'width':maskWidth,'height':maskHeight});

    //transition effect     
    $('#mask').fadeIn(1000);    
    $('#mask').fadeTo("slow",0.8);  

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    //Set the popup window to center
    $(id).css('top',  winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);

    //transition effect
    $(id).fadeIn(2000);     

    //if close button is clicked
      if ($('.window .close').attr('checked')==true){
    function (e) {
    //Cancel the link behavior
    e.preventDefault();

    $('#mask').hide();
    $('.window').hide();
        }};     

        //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
    $('.window').hide();
        });     

      });

   </script>


    <div style="font-size: 10px; color: rgb(204, 204, 204);">lorem ipsum</div>

     <div id="boxes">
<div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window">
Simple Modal Window | 
<input type="checkbox" class="close">
</div>
<!-- Mask to cover the whole screen -->
<div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask">    </div>
</div>

Answer 1

Попробуйте прочитать это fancybox .Это потрясающе, и вы можете открыть всплывающее окно и установить флажок.

Answer 2

Ваша недопустимая функция закрытия JavaScript:

 //if close button is clicked
 if ($('.window .close').attr('checked')==true){
    function (e) {
    //Cancel the link behavior
    e.preventDefault();

    $('#mask').hide();
    $('.window').hide();
 }};     

Вы можете удалить оба события щелчка и заменить их одним блоком кода ->

$('#dialog .close, #mask').click(function(e){ //listen for clicks on the mask and close checkbox
    $('#mask').hide();   // hide the mask
    $('#dialog').hide(); // hide the dialog div
});

Рабочий пример: http://jsfiddle.net/4Mpb3/2/

Answer 3

Вы должны изменить свои коды следующим образом:

$(document).ready(function() {  

var id = '#dialog';

//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();

//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});

//transition effect     
$('#mask').fadeIn(1000);    
$('#mask').fadeTo("slow",0.8);  

//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

//Set the popup window to center
$(id).css('top',  winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);

//transition effect
$(id).fadeIn(2000);     

//if close checbox is checked
  if ($('.window .close').attr('checked')==false){

    $('#mask').hide();
    $('.window').hide();

  }; 

  //if close checkbox is clicked
  $('.window .close').click(function(){

      if(!$(this).is(":checked")){
        $('#mask').hide();
        $('.window').hide();
      }

  });      

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });     

});

Вам необходимо добавить атрибут флажка «флажок».

<input type="checkbox" class="close" checked="checked">

Answer 4

Похоже, вы ищете событие, которое должно быть запущено, когда флажок установлен?

, если это так, функция, которая должна быть в событии щелчка флажка

    //if close button is clicked
    $('.window .close').click(function(){
      if ($(this).attr('checked')==true)
      {
        //Cancel the link behavior
        e.preventDefault();

        $('#mask').hide();
        $('.window').hide();
      }
    });     

Answer 5

не в состоянии полностью понять ваш вопрос .. поэтому вам нужно сделать так, чтобы, если пользователь щелкнет по флажку, маска исчезнет, ​​и страница отобразится?

показывает ваше отображение поверх маски, потому что нет детализации по z-индексу div .. если он изменяет код как

$('#mask, .close').click(function () { 
   .
   .

, чтобы заставить его работать...