Last active
January 18, 2024 18:23
-
-
Save madan712/4546371 to your computer and use it in GitHub Desktop.
Open Popup div with disabled background using Javascript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <HTML> | |
| <HEAD> | |
| <TITLE>Popup div with disabled background</TITLE> | |
| <style> | |
| .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; | |
| } | |
| </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> | |
| This is can be used as a popup window | |
| </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> | |
| Simple popup div with disabled background | |
| </h3> | |
| <br/> | |
| <a href="#" onClick="pop('popDiv')">Click here to open a popup div</a> | |
| </CENTER> | |
| </BODY> | |
| </HTML> |
Note: this doesn't disable keyboard-focusing background elements. If you're designing a truly accessible application, you'll need a more complex solution than this.
so nice and very helpful ,
Regards,
Vikas
https://dotnetbasic.com
I have this also in my body tag, it is applying the ontop css to everything except the linked php files, how can I apply to them also
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
very helpful, regards