Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <script type="text/javascript">
            function showPopUp(el) {
                var cvr = document.getElementById("cover")
                var pop = document.getElementById(el)
                cvr.style.display = "block"
                pop.style.display = "block"
                pop.className = "shown"
                if (document.body.style.overflow = "hidden") {
                    cvr.style.width = "100%"
                    cvr.style.height = "100%"
                }
            }
            function closePopUp(el) {
                var cvr = document.getElementById("cover")
                var pop = document.getElementById(el)
                cvr.style.display = "none"
                pop.className = ""
                document.body.style.overflowY = "scroll"
            }
        </script>
        <style type="text/css">
            #cover {
                display:none;
                position:absolute;
                left:0;
                top:0;
                width:100%;
                height:100%;
                background:gray;
                filter:alpha(Opacity = 50);
                opacity:0.5;
                -moz-opacity:0.5;
                -khtml-opacity:0.5;
            }
​
            #popup {
                display:block;
                left:100px;
                top:100px;
                width:300px;
                height:300px;
                position:absolute;
                z-index:100;
                background:white;
                padding:2px;
                border:1px solid gray;
                opacity:0;
                -webkit-transform:scale(.5, .5);
                -webkit-transition:all .5s ease-in-out;
            }
          
          #popup.shown {
            display: block;
            opacity: 1;
            -webkit-transform:scale(1, 1);
          }
​
            #cover-link {
            position:absolute;
            width:100%;
            height:100%;
            left:0;
            top:0;
            }
        </style>
    </head>
    <body>
        <div id="cover"><a id="cover-link" href="#" onclick="closePopUp('popup');"></a></div>
        <div id="popup">
            Some Words
        </div>
        <a href="#" onclick="showPopUp('popup');">Show</a>
    </body>
</html>
 
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers