Fatal编程技术网
  • javascript/
  • Javascript 第一次运行，删除div，第二次运行，未删除div。弹出窗口“；灯箱“；

Javascript 第一次运行，删除div，第二次运行，未删除div。弹出窗口“；灯箱“；

javascript jquery

Javascript 第一次运行，删除div，第二次运行，未删除div。弹出窗口“；灯箱“；,javascript,jquery,Javascript,Jquery,我想做一种灯箱思维。这是一次学习经历，所以我不想使用fancybox等 我的问题是： 我有两个链接。每一个打开一个覆盖层，顶部是一个包含内容的白色框。 这很有效。 当我关闭时，只有打开白盒的第一个链接同时关闭白盒和覆盖。secound链接仅关闭覆盖，而不关闭白盒：s 为什么 html代码： <!DOCTYPE> <head> <title>Box</title> <link href="style.css" rel="stylesheet"

我想做一种灯箱思维。这是一次学习经历，所以我不想使用fancybox等

我的问题是： 我有两个链接。每一个打开一个覆盖层，顶部是一个包含内容的白色框。 这很有效。 当我关闭时，只有打开白盒的第一个链接同时关闭白盒和覆盖。secound链接仅关闭覆盖，而不关闭白盒：s 为什么

html代码：

<!DOCTYPE>
<head>
<title>Box</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="whitebox.js"></script>
</head>

<body>

<div id="div0">
   box0   
</div> 

<div id="box0" class="box">
    <a class="closeBtn">X</a>
    <h1>box0</h1>
    <form action="" method="POST">
        <div>Your email: <input type="text"></div>
        <br />
        <div>Message: <input type="textarea"></div>
    </form>

</div>

<div id="div1">
   box1    
</div> 

<div id="box1" class="box">
    <a class="closeBtn">X</a>
    <h1>box1</h1>
    <form action="" method="POST">
        <div>Your email: <input type="text"></div>
        <br />
        <div>Message: <input type="textarea"></div>
    </form>

</div>

    <div class="pageOverlay"></div> 

</body>
</html>
style.css：

#div0{
margin-top:150px;
margin-left:auto;
margin-right:auto;
text-align:center;
border:1px solid black;
cursor: pointer;
width: 150px;
}
#div1{
margin-top:150px;
margin-left:auto;
margin-right:auto;
text-align:center;
border:1px solid black;
cursor: pointer;
width: 150px;
}
.pageOverlay{
display:none;
position:fixed;
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
z-index:1000;
}
.box{
display:none;
position:relative;
height:450px;
width:450px;
background:#ffffff;
border:2px solid #a0a0a0;
z-index:2000;
padding:12px;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
}
.box h1{
text-align:left;
color:#7FA5FE;
font-size:22px;
font-weight:700;
border-bottom:1px solid #a0a0a0;
padding-bottom:2px;
margin-bottom:20px;
font-family:Arial, Helvetica, sans-serif;
}
.box a{
cursor: pointer;    
}
.box p{
text-align:center;
}

.closeBtn{
font-size:12px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#7FA5FE;
font-weight:700;
display:block;
#div0{
margin-top:150px;
margin-left:auto;
margin-right:auto;
text-align:center;
border:1px solid black;
cursor: pointer;
width: 150px;
}
#div1{
margin-top:150px;
margin-left:auto;
margin-right:auto;
text-align:center;
border:1px solid black;
cursor: pointer;
width: 150px;
}
.pageOverlay{
display:none;
position:fixed;
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
z-index:1000;
}
.box{
display:none;
position:relative;
height:450px;
width:450px;
background:#ffffff;
border:2px solid #a0a0a0;
z-index:2000;
padding:12px;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
}
.box h1{
text-align:left;
color:#7FA5FE;
font-size:22px;
font-weight:700;
border-bottom:1px solid #a0a0a0;
padding-bottom:2px;
margin-bottom:20px;
font-family:Arial, Helvetica, sans-serif;
}
.box a{
cursor: pointer;    
}
.box p{
text-align:center;
}

.closeBtn{
font-size:12px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#7FA5FE;
font-weight:700;
display:block;
}
  • 你不需要保持状态，因为如果覆盖在这里，你不能点击错误的按钮
  • 您使用选择器时只需将
    box
    var设置一次
  • 当您使用一个覆盖元素时，每次都需要为它绑定click事件（请参见
    one（）
    I used
  • 最好对整个代码使用
    $（document）.ready（function（）{}）
    ，以保持全局范围干净
  • 我做了一个技巧，只绑定一个元素上的点击，然后由另一个元素触发，这样就不会有重复的事件运行程序
    • 以下是：

    我还可以建议生成对话框内容，而不是在DOM中包含多个元素。我认为问题在于绑定事件处理程序时：如果您尝试以下操作：

    //this function closes the overlay when user clicks outside the message area
$(".pageOverlay").click(function(){
    alert(id); //Or better console.log(id)
    closeBox(id);
});
    您将看到任何链接都会触发函数closeBox两次，这是因为您确实调用了事件绑定两次。请尝试删除
    runBox（）
    函数：

    //Makes sure the document is fully loaded. 
$(document).ready(function(){

    $('#div0').click(function(){
        startOverlay('#box0'); 
        centerBox('#box0');
    });

    $('#div1').click(function(){
        startOverlay('#box1'); 
        centerBox('#box1');
    });

    //this function closes the overlay when user clicks "close"
    //Note: you can bind both on the same call
    $(".closeBtn,.pageOverlay").click(function(){
        if(jQuery('#box0:visible').length>0){
            closeBox('#box0');
        }else{
            closeBox('#box1');
        }
    });

});​
    你能提供一个工作演示吗？很好的工具，当然：这是太多的代码。制作一个testcase.if框多于两个，你计划制作一组
    if（）{}else if（）{}
    ？不是的，我只是想回答他的问题：为什么第二个盒子不关？但你肯定是对的，如果要显示更多的盒子/对话框，你的方法会更灵活。 
    //this function closes the overlay when user clicks outside the message area
$(".pageOverlay").click(function(){
    alert(id); //Or better console.log(id)
    closeBox(id);
});

    //Makes sure the document is fully loaded. 
$(document).ready(function(){

    $('#div0').click(function(){
        startOverlay('#box0'); 
        centerBox('#box0');
    });

    $('#div1').click(function(){
        startOverlay('#box1'); 
        centerBox('#box1');
    });

    //this function closes the overlay when user clicks "close"
    //Note: you can bind both on the same call
    $(".closeBtn,.pageOverlay").click(function(){
        if(jQuery('#box0:visible').length>0){
            closeBox('#box0');
        }else{
            closeBox('#box1');
        }
    });

});​