web-dev-qa-db-fra.com

Afficher une div en tant que pop-up modale

J'ai la div suivante:

<div id="divAlert">
    <div id='divAlertText'>You must select a language.</div>
    <div id='divAlertButton' class='btn blue' onclick="HideAlert();">Ok</div>
</div>

Est cette page HTML, il y a plus de divs et de boutons. Je veux afficher divAlert comme une fenêtre contextuelle modale.

Je sais qu'il y a quelque chose dans jQuery, je pense, que je peux utiliser pour montrer mon div avec un fond noir à moitié transparent remplissant toute la page. Mais je ne me souviens pas de son nom.

Aucun conseil?

14
VansFannel

vous pouvez utiliser le widget de dialogue jquery

http://jqueryui.com/demos/dialog/

14
Buddhi

Une simple boîte de dialogue ou une boîte de dialogue pop-up modale peut être effectuée par les propriétés CSS et un peu de jQuery. L'idée de base est simple:

  • 1. Créez un div avec un fond semi transparent et affichez-le en haut de votre page de contenu en cliquant.
  • 2. Affichez votre div pop-up ou div d'alerte au-dessus du div semi-transparent de gradation/masquage.
  • Nous avons donc besoin de trois divisions:

  • contenu (contenu principal du site).
    • hider (Pour atténuer le contenu).
    • popup_box (le div modal à afficher).

      Définissons d'abord le CSS:

          #hider
          {
              position:absolute;
              top: 0%;
              left: 0%;
              width:1600px;
              height:2000px;
              margin-top: -800px; /*set to a negative number 1/2 of your height*/
              margin-left: -500px; /*set to a negative number 1/2 of your width*/
              /*
              z- index must be lower than pop up box
             */
              z-index: 99;
             background-color:Black;
             //for transparency
             opacity:0.6;
          }
      
          #popup_box  
          {
      
          position:absolute;
              top: 50%;
              left: 50%;
              width:10em;
              height:10em;
              margin-top: -5em; /*set to a negative number 1/2 of your height*/
              margin-left: -5em; /*set to a negative number 1/2 of your width*/
              border: 1px solid #ccc;
              border:  2px solid black;
              z-index:100; 
      
          }
      

      Il est important que nous définissions le z-index de notre div caché plus bas que la boîte pop_up car nous voulons afficher popup_box en haut.
      Voici le script Java:

              $(document).ready(function () {
              //hide hider and popup_box
              $("#hider").hide();
              $("#popup_box").hide();
      
              //on click show the hider div and the message
              $("#showpopup").click(function () {
                  $("#hider").fadeIn("slow");
                  $('#popup_box').fadeIn("slow");
              });
              //on click hide the message and the
              $("#buttonClose").click(function () {
      
                  $("#hider").fadeOut("slow");
                  $('#popup_box').fadeOut("slow");
              });
      
              });
      

      Et enfin le HTML:

      <div id="hider"></div>
      <div id="popup_box">
          Message<br />
          <a id="buttonClose">Close</a>
      </div>    
      <div id="content">
          Page's main content.<br />
          <a id="showpopup">ClickMe</a>
      </div>
      

      J'ai utilisé jquery-1.4.1.min.js www.jquery.com/download et testé le code dans Firefox. J'espère que cela t'aides.

  • 46
    mirmdasif