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

无法完全理解你的问题。所以如果用户点击复选框，掩码消失并显示页面，你需要这样做吗？

是否显示在掩码之上，因为div的z-index上没有详细信息..如果它确实改变了代码

$('#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();
 }};

您可以删除所有点击事件并替换为单个代码块 - ＆gt;

$('#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/

jquery弹出窗口onload

5 个答案: