我试图制作一种灯箱思想。这是一次学习经历所以我不想使用fancybox等。
我的问题是: 我有2个链接。每个都打开一个叠加层,顶部是一个带有内容的白色框。 这有效。 当我关闭时,只有第一个打开白盒的链接会关闭白盒和叠加层。 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>
whitebox.js:
var state = 0;
function startOverlay(id){
if(state == 0){
$(".pageOverlay").css({"opacity": "0.85"});
$(".pageOverlay").fadeIn("fast");
$(id).fadeIn("fast");
state = 1;
}
}
//closes the overlay and box
function closeBox(id){
if(state == 1){
$(".pageOverlay").fadeOut("fast");
$(id).fadeOut("fast");
state = 0;
}
}
function centerBox(id){
//alert(id);
var browserWidth = document.documentElement.clientWidth;
var browserHeight = document.documentElement.clientHeight;
var boxHeight = $(id).height();
var boxWidth = $(id).width();
$(id).css({"position": "absolute","top": (browserHeight / 2) - (boxHeight / 2),"left": (browserWidth / 2) - (boxWidth / 2)});
}
function runBox(link, id){
$(link).click(function(){
startOverlay(id);
centerBox(id);
});
//this function closes the overlay when user clicks "close"
$(".closeBtn").click(function(){
closeBox(id);
});
//this function closes the overlay when user clicks outside the message area
$(".pageOverlay").click(function(){
closeBox(id);
});
}
//Makes sure the document is fully loaded.
$(document).ready(function(){
runBox("#div0","#box0");
runBox("#div1","#box1");
});
的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;
}
答案 0 :(得分:1)
box
var只使用了一次选择器,one()
我用过$(document).ready(function() {})
来保存全局范围。这里是fixed code:
$(document).ready(function() {
function startOverlay(box) {
$(".pageOverlay").css({
"opacity": "0.85"
});
$(".pageOverlay").fadeIn("fast");
box.fadeIn("fast");
}
//closes the overlay and box
function closeBox(box) {
$(".pageOverlay").fadeOut("fast");
box.fadeOut("fast");
}
function centerBox(box) {
//alert(id);
var browserWidth = document.documentElement.clientWidth;
var browserHeight = document.documentElement.clientHeight;
var boxHeight = box.height();
var boxWidth = box.width();
box.css({
"position": "absolute",
"top": (browserHeight / 2) - (boxHeight / 2),
"left": (browserWidth / 2) - (boxWidth / 2)
});
}
//trigger click on close button by click on pageOverlay, to not duplicate events
$(".pageOverlay").bind("click", function() {
$('.closeBtn:visible').click();
});
function runBox(link, id) {
var box = $(id);
$(link).click(function() {
startOverlay(box);
centerBox(box);
//this function closes the overlay when user clicks "close" or outside of area
//bind to only visible button
$(".closeBtn:visible").one("click",function() {
closeBox(box);
})
});
}
runBox("#div0", "#box0");
runBox("#div1", "#box1");
});
我还可以建议生成对话框内容,而不是在DOM中使用多个元素
答案 1 :(得分:0)
我认为问题在于绑定事件处理程序时:如果你试试这个:
//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');
}
});
});