1

背景をフェードアウトするポップアップウィンドウをシミュレートしています。これを行うには、画面全体を埋める div を切り替えるだけです。外側の背景をクリックしてポップアップを閉じることができるようにしたいのですが、現在起こっている新しいコンテンツ領域をクリックしたときはできません。私のコード:

JS:

function popbox() {
    $('#overbox').toggle();
}

HTML:

<div class="popbox" onclick="popbox()"> Click Here </div>

<div id="overbox" onclick="popbox()">
     <div id="infobox1">
          <p>This is a new box</p>
          <br />
          <p>hello </p>
          <br/><br/>
          <p style="color:blue;text-align:center;cursor:pointer;" onclick="popbox()">close</p>
     </div><!-- end infobox1 --> 
</div> <!-- end overbox -->

CSS:

#overbox {
     position: fixed;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%; 
     background: rgba(64, 64, 64, 0.5);
     z-index: 999999;
     display: none;
}

#infobox1 {
    margin: auto;
    position: absolute;
    left: 35%;
    top: 20%;
    height: 300px;
     width: 400px;
    background-color: white;
    border: 1px solid red;
}

.popbox {
     cursor: pointer;
     color: black;
     border: 1px solid gray;
     padding: 5px; 10px;
     background: ghostwhite;
     display: inline-block;
}

JSFiddle リンク: http://jsfiddle.net/RrJsC/

繰り返しますが、色あせた背景または「閉じる」(jsfiddleでは機能していませんが、私のサイトにあります)をクリックした場合にのみ切り替えたいのですが、含まれている白いボックス内をクリックしたときは切り替えません。いくつかの調査の後、.stopPropagation() を探しているようですが、まったく動作させることができませんでした。

4

2 に答える 2

2

jQueryのイベントハンドラーを使用して動作するようにしました：

$('#container').on('click', '.popbox, #overbox', function(e){   
  $('#overbox').toggle();
 });
 $('#container').on('click', '#infobox1', function(e){
    e.stopPropagation();
 });

より良いパフォーマンスのために交換documentしました。'#container'すべての div をラップして<div id="container">...</div>、クリックするたびにコールバックが dom で発生しないようにする必要があります (コールバックはセレクターが一致した場合にのみ呼び出されると考えられていても)。

onclick関数が定義されていないとエラーがスローされるため、html 属性も削除する必要があります。

于 2013-09-16T23:05:42.180 に答える
0

あなたの問題をよく理解していることを願っています。

その場合は、次のようにする必要があります。

<div id="overbox">

これの代わりに：

<div id="overbox" onclick="popbox()">

ここに更新されたjsfiddleがあります

于 2013-09-17T00:20:09.753 に答える