jQuery popup window onload

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

не в состоянии понять ваш вопрос completely..so вам нужно сделать это как если пользователь нажмет флажок маска исчезает и страница показывает вверх?

делает свое шоу на верхней части маски, потому что нет ни одной детали на г-индекс div..if он изменяет код как

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

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

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

Ваша близкая функция не действует 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/