Mark 7/27/2016 0

this html code will create a modal div

              <TITLE>Popup div with disabled background</TITLE>
                     .ontop {
                           z-index: 999;
                           width: 100%;
                           height: 100%;
                           top: 0;
                           left: 0;
                           display: none;
                           position: absolute;                      
                           background-color: #cccccc;
                           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;
              <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');
              <div id= "popDiv" class ="ontop">
                     <table border= "1" id="popup" >
                                         This is can be used as a popup window
                                         Click Close OR escape button to close it
                                         <a href="#" onClick="hide('popDiv')" >Close</a>
                           Simple popup div with disabled background
                     <a href= "#" onClick="pop('popDiv')" >Click here to open a popup div</a>

Report Bug

Please Login to Report Bug

Reported Bugs


Please Login to Comment