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

我试图构建一个简单的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>

 $(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();
 });

jQuery:

<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>

 $(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();
 });

---

阅读css z-index如何确定哪些层位于哪个层之上。z指数越高，优先级越高

好的！Z指数就是答案！z-index（#boxeConf）>z-inx（#overlay）