在窗口中创建多个弹出窗口

Question

我仍然是jQuery的新手，我正试图弄清楚如何在窗口中创建多个弹出窗口。我想要它，每个文本打开一个不同的弹出窗口，包含不同的内容。我希望弹出窗口在弹出窗口外单击时关闭，而不是仅在我按下Esc时关闭。非常感谢任何帮助。提前谢谢。

HTML：

     <div id="main">
           <h1 class="button" id="applepie">Apple Pie</h1>
                <div class="modal-mask"></div>
                <div class="modal-popup">hello</div>

                <h3>Asian Noodles</h3>
                <div class="modal-mask"></div>
                <div class="modal-popup">hello</div>


                <h3>Avocado Roll</h3>
                <div class="modal-mask"></div>
                <div class="modal-popup">hello</div>


                <h3>Bruscetta</h3>
                <div class="modal-mask"></div>
                <div class="modal-popup">bye</div>


                <h3>Bagels</h3>
                <div class="modal-mask"></div>
                <div class="modal-popup">eat</div>


                <h3>Banana Pudding</h3>
                <div class="modal-mask"></div>
                <div class="modal-popup">hungey</div>


     </div>

CSS：

.modal-mask{
    width:100%;
    height:100%;
    position: absolute;
    top:0px;
    z-index: 100;
    background-color:#000;
    opacity:0.4;
    display:none;
    }



.modal-popup{
     position:fixed;
     top: 50%;
     left: 50%;
     width: 5%;
     height: 5%;
     z-index: 101;
     background-color:#fff; 
     display:none;
     }

JS：

$(function(){
  $(".button").on("click", function(){

    $(".modal-mask").css("display", "block");
    $(".modal-popup").css("display", "block");


  $(document).on("keydown", function(event){
   if(event.keyCode === 27){
    $(".modal-mask").css("display", "");
       $(".modal-popup").css({
           "display": "",
           "width": "",
           "height": "",
           "top": "",
           "left": ""
       });
    }
  });
});

Answer 1

Your Code with escape detection and modal popup for corresponding Header Clicked

解决

• 首先更改您的代码包装每个标头和内容包装器div中的2个模态div
• 点击标题后，检测到父对象，设置了第2和第3个元素display:block，反之亦然

HTML

<div id="main">
     <h1 class="button" id="applepie">Apple Pie</h1>

     <div id="Container1">
    <div class="modal-mask"></div>
    <div class="modal-popup">hello</div>
    </div>  
    <div id="Container2">
     <h3>Asian Noodles</h3>
    <div class="modal-mask"></div>
    <div class="modal-popup">hello</div>
    </div>
    <div id="Container3">
     <h3>Avocado Roll</h3>

    <div class="modal-mask"></div>
    <div class="modal-popup">hello</div>
    </div>
    <div id="Container4">
     <h3>Bruscetta</h3>

    <div class="modal-mask"></div>
    <div class="modal-popup">bye</div>
    </div>
 <div id="Container5">
        <h3>Bagels</h3>

    <div class="modal-mask"></div>
    <div class="modal-popup">eat</div>

    </div>
    <div id="Container6">
     <h3>Banana Pudding</h3>

    <div class="modal-mask"></div>
    <div class="modal-popup">hungey</div>
    </div>

</div>

JQUERY

$("h3").on("click", function () {

 //   $(".modal-mask").css("display", "block");
//    $(".modal-popup").css("display", "block");
 $(".modal-mask").css("display", "none");
  $(".modal-popup").css("display", "none");
$($(this).parents().children()[1]).toggle();       
$($(this).parents().children()[2]).toggle();
    $(document).keyup(function(e) {

  if (e.keyCode == 27) {
   $(".modal-mask").css("display", "none");
  $(".modal-popup").css("display", "none");
  }   // esc
});

});

//Click out-side pop-up that ie on the mask close
$(".modal-mask").on("click", function(){

      $(".modal-mask").css("display", "none");
  $(".modal-popup").css("display", "none");
});

CSS

.modal-mask {
    width:100%;
    height:100%;
    position: absolute;
    top:0px;
    z-index: 100;
    background-color:#000;
    opacity:0.4;
    display:none;
}
.modal-popup {
    position:fixed;
    top: 50%;
    left: 50%;
    width: 15%;
    height: 15%;
    z-index: 101;
    background-color:#fff;
    display:none;
}

h3{
    background: -webkit-linear-gradient(left, red , blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , blue); /* Standard syntax */

}
h3:hover{
    background: -webkit-linear-gradient(left, blue , red); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, blue,red ); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,blue ,red ); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right,  blue,red ); /* Standard syntax */

}

输出

Answer 2

通过聆听文档来捕获所有点击事件，但是 使用事件委托表示法，所以我们可以弄清楚 点击源自的最低级别元素。像这样：

$(document).on('click', '*', function(){
    //alternatively, you can use the 'keydown' event, as you have.

    //if the click did *not* bubble up through the modal, 
    //then the click was outside it, on something else:
    if(!$(this).parents().hasClass('modal-popup'){
        //do what you need to do when user clicks outside the modal
        //i.e. close the modal
    }
})