Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on Apr 25th, 2012  |  syntax: None  |  size: 0.80 KB  |  hits: 11  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. How to create a simple Modal Dialog Box in JQuery?
  2. <div id="overlay">
  3.     <h4 style='text-align:left;'>Confirmation</h4>
  4.     <p style='margin-top:5%;margin-bottom:15%;'>Es-Tu satisfait de la couverture du Magazine ?</p>
  5.     <input value="Non, Corriger" id="close" class="submitMagHalf" />
  6.     <input type="submit" value="Oui,envoyer" class='submitMagHalf'/>
  7. </div>
  8. <div id='boxConf'>
  9.     &nbsp;
  10. </div>
  11.        
  12. $(document).ready(function() {
  13.       $(".submitMag").click(function() {
  14.          $("#overlay").show();
  15.          $("#overlay").fadeTo(1000,1.0);
  16.          $("#boxConf:not(#overlay)").fadeTo(2000,0.5);
  17.  
  18.       });
  19.  
  20.       $("#close").click(function() {
  21.          $("#overlay").hide();
  22.          $("body:not(#overlay)").fadeTo('fast',2.0);
  23.  
  24.       });
  25.  
  26.       $("#overlay").hide();
  27.       $("#boxConf").hide();
  28.  });