A basic js popin.
Created
February 19, 2012 11:56
-
-
Save Simounet/1863430 to your computer and use it in GitHub Desktop.
Simple JS Popin
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <title>Simple JS Popin</title> | |
| <link href="style.css" rel="stylesheet" type="text/css" /> | |
| <script src="script.js" type="text/javascript"></script> | |
| </head> | |
| <body> | |
| <div id="pop1" class="parentDisable"> | |
| <div class="popin"> | |
| <h2>This is popin 1</h2> | |
| <a href="#" onClick="return hide('pop1')">Close</a> | |
| </div> | |
| </div> | |
| <div id="pop2" class="parentDisable"> | |
| <div class="popin"> | |
| <h2>This is popin 2</h2> | |
| <a href="#" onClick="return hide('pop2')">Close</a> | |
| </div> | |
| </div> | |
| <h3>Simple JS Popin Example</h3> | |
| <a href="#" onClick="return pop('pop1')">popin 1</a> | |
| <a href="#" onClick="return pop('pop2')">popin 2</a> | |
| </body> | |
| </html> |
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
| function pop(div) { | |
| document.getElementById(div).style.display='block'; | |
| return false; | |
| } | |
| function hide(div) { | |
| document.getElementById(div).style.display='none'; | |
| return false; | |
| } |
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
| .parentDisable { | |
| z-index:999; | |
| width:100%; | |
| height:100%; | |
| display:none; | |
| position:absolute; | |
| top:0; | |
| left:0; | |
| /* Fallback for web browsers that doesn't support RGBa */ | |
| background: rgb(0, 0, 0); | |
| /* RGBa with 0.6 opacity */ | |
| background: rgba(0, 0, 0, 0.6); | |
| /* For IE 5.5 - 7*/ | |
| filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); | |
| /* For IE 8*/ | |
| -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; | |
| } | |
| .popin { | |
| width:300px; | |
| height:200px; | |
| margin: 0 auto; | |
| color: #000; | |
| background-color: #fff; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment