0

一種のライトボックス シンキーを作ろうとしています。学習経験なので、fancyboxなどは使いたくない.

私の問題は次のとおりです。2つのリンクがあります。それぞれがオーバーレイを開き、その上にコンテンツを含む白いボックスが開きます。これは機能します。閉じると、ホワイトボックスを開く最初のリンクのみが、ホワイトボックスとオーバーレイの両方を閉じます。2 番目のリンクは、ホワイトボックスではなく、オーバーレイのみを閉じます。: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");
});

スタイル.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;
}
4

2 に答える 2

1
  1. オーバーレイがここにある場合、間違ったボタンをクリックできないため、状態を保持する必要はありません。
  2. boxvar を 1 回だけ作成する必要があるときにセレクターを使用した場合、
  3. 1 つのオーバーレイ要素を使用するため、そのたびにクリック イベントをバインドする必要があります (「one()使用済み」を参照)。
  4. $(document).ready(function() {})グローバルスコープをクリーンに保つために、コード全体に使用することをお勧めします。
  5. イベントランナーが重複しないように、1つの要素のみにクリックをバインドし、別の要素でトリガーするトリックを作成しました。

ここに固定コード：

$(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 に複数の要素を含める代わりに、ダイアログ コンテンツを生成することも提案できます。

于 2012-12-01T23:47:21.843 に答える
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を2回トリガーすることがわかります。これは、実際にイベントbindを2回呼び出しているためです。関数を削除してみてください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');
        }
    });

});​
于 2012-12-02T00:02:10.357 に答える