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指数越高，优先级越高

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

1 个答案: