Popup Contact Form with Disabled background Code/Snippet

popup div with disabled background


<HTML>
 <HEAD>
  <TITLE>Popup with Disabled background</TITLE>
  <style>
   .ontop {
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    position: absolute;    
    background-color: black;
    color: #aaaaaa;
    opacity: .4;
    filter: alpha(opacity = 50);
   }
   #popup {
    width: 300px;
    height: 200px;
    position: absolute;
    color: #000000;
    background-color: #ffffff;
    /* To align popup window at the center of screen*/
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -150px;
   }
  </style>
  <script type="text/javascript">
   function pop(div) {
    document.getElementById(div).style.display = 'block';
   }
   function hide(div) {
    document.getElementById(div).style.display = 'none';
   }
   //To detect escape button
   document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.keyCode == 27) {
     hide('popDiv');
    }
   };
  </script>
 </HEAD>
 <BODY>
  <div id="popDiv" class="ontop">
   <table border="1" id="popup">
    <tr>
     <td>
      Insert the Popup contact form code
     </td>
    </tr>
    <tr>
     <td>
      Click Close OR escape button to close it
      <a href="#" onClick="hide('popDiv')">Close</a>
     </td>
    </tr>
   </table>
  </div>
  <CENTER>
   <h3>
    Popup  div with disabled background
   </h3>
   <br/>
   <a href="#" onClick="pop('popDiv')"> open a popup div</a>
  </CENTER>
 </BODY>
</HTML>

Popup Contact Form with Disabled background Code/Snippet

popup div with disabled background

0 comments: