Как создать простое модальное диалоговое окно в JQuery? - PullRequest
Новая
       30

Как создать простое модальное диалоговое окно в JQuery?

1 голос
/ 28 февраля 2012

Я пытаюсь создать простую функцию 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();
 });

1 Ответ

3 голосов
/ 28 февраля 2012

Узнайте, как работает css z-index, чтобы определить, какие слои поверх каких.Чем выше z-индекс, тем выше приоритет

...