javascript pour superposer une fenêtre modale qui est alignée au centre

Question

voulez simplement savoir le javascript pour superposer un div au centre de la page.

Je veux juste utiliser le script java simple pour afficher et masquer un div au centre de la page avec "Please wait ..." message et désactiver l'arrière-plan. Aussi ce div shoud show sur le dessus de l'autre contenu de la page.

Mon div ressemble à ce

<div id='mydiv' style="display:none;" ><img src="myimg.gif" /> Please Wait... </div> 

En cliquant sur un bouton, je veux montrer le centre de contenu div aligné sur la page.

I ne voulez pas voulez utiliser jquery, extjs ,, etc pour y parvenir.

J'ai vu quelques exemples sur le web avec beaucoup d'autres fonctionnalités ajoutées à un popup modal, cherchant simplement quelque chose de simple et propre. Le strict minimum JS requis pour le faire.

Answer 1

Le div que vous voulez afficher doit avoir un ID:

<div id="loaderdiv"> 

Ensuite, dans votre javascript, vous affichez cette div avec le code suivant:

document.getElementById("loaderdiv").style.display = ''; 

Cest le strict minimum que vous » ll besoin.

Centrer l'image peut être fait en utilisant le CSS:

<div style="position:absolute;top:50%;left:50%;margin-top:-[imgheight/2]px;margin-left:-[imgwidth/2]px"> 

Answer 2

<div class="overlay_msg" id="overlay_msg" style="width:350px; height:100px; background-color:#ffffff; margin-left:300px; margin-top:20%; visibility:hidden; z-index:201; position:fixed; padding:15px; text-align:center;"> 
       <a href="http://example.com">example.com</a><br /> 
     </div><!--overlay_msg--> 
     <div class="my_overlay" id="my_overlay" style="background-color:#000000; opacity:.7; position:fixed; z-index:200; width:100%; height:100%; margin:0px; padding:0px; visibility:hidden;" onclick="hideMyOverlay()"> 
     </div><!--my_overlay--> 
     <script type="text/javascript"> 
      function showMyOverlay() 
      { 
       document.getElementById('my_overlay').style.visibility='visible'; 
       document.getElementById('overlay_msg').style.visibility='visible'; 
      } 
      function hideMyOverlay() 
      { 
       document.getElementById('my_overlay').style.visibility='hidden'; 
       document.getElementById('overlay_msg').style.visibility='hidden';    
      } 
     </script>