jquery - 如何在 JQuery 中创建一个简单的模态对话框？

Question

我正在尝试构建一个简单的 JQuery 函数:模式框 (我的第一个，我们都从某个地方开始；)

所以我使用了覆盖层，但我的框被覆盖层覆盖了，当整个页面被白色覆盖层覆盖时，如何使该框显示为 100% 不透明？

HTML:

<div id="overlay">
    <h4 style='text-align:left;'>Confirmation</h4>
    <p style='margin-top:5%;margin-bottom:15%;'>Es-Tu satisfait de la couverture du Magazine ?</p>
    <input value="Non, Corriger" id="close" class="submitMagHalf" />
    <input type="submit" value="Oui,envoyer" class='submitMagHalf'/>
</div>
<div id='boxConf'>
    &nbsp;
</div>

CSS:

#overlay{
    position:absolute;
    margin:auto;
    text-align: center;
    width:400px;
    height:200px;
    background-color:white;
    top:50%;
    margin-top:-100px;
    left:50%;
    margin-left:-200px;
    border:1px;
    border-bottom:10px #082545;
}

#boxConf{
    position:fixed;
    width:100%;
    height:200%;
    background-color:white;
    top:0;
    left:0;
}

jQuery:

 $(document).ready(function() { 
      $(".submitMag").click(function() {
         $("#overlay").show();
         $("#overlay").fadeTo(1000,1.0);
         $("#boxConf:not(#overlay)").fadeTo(2000,0.5);

      });

      $("#close").click(function() {
         $("#overlay").hide();
         $("body:not(#overlay)").fadeTo('fast',2.0);

      });

      $("#overlay").hide();
      $("#boxConf").hide();
 });

Answer 1

了解 css z-index 如何确定哪些层位于哪些层之上。 z-index越高，优先级越高