JavaScript Popup

It's a pure JavaScript Popup demo...

by Nikhil krishnan

HTML

<h2>Pure JavaScript Popup</h2>
<div id="popup">
    <span class="overlay"></span>
    <div class="popup-content">
        <span onclick="closePopup()" class="close-btn">X</span>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, quisquam perferendis fugiat dolore saepe obcaecati rerum omnis repudiandae vero et alias doloremque, totam deserunt cupiditate. Nam eveniet rerum cumque. Est fugiat debitis veritatis veniam odio excepturi rerum sint, et quasi laudantium eius iure velit unde aperiam, assumenda molestiae provident! Facilis.
    </div>
</div>
<button onclick="openPopup()">Open Popup</button>

<script>
    function openPopup() {
        document.getElementById("popup").style.visibility = "visible";
    }
    function closePopup() {
        document.getElementById("popup").style.visibility = "hidden";
    }
</script>

CSS

@import url(http://fonts.googleapis.com/css?family=Poppins:300,400);
body{
    background-color: #34495e;
    font-family: 'Poppins', sans-serif;
}
#popup {
    visibility: hidden;
}
h2{
    font-size: 30px;
    color: #fbfcfc;
    margin: 50px 0 0;
    text-align: center;
    font-weight: 300;
}
button{
    width: 100px;
    margin: 10% auto;
    height: 30px;
    background-color: #c0392b;
    border: none;
    color: #fff;
    cursor: pointer;
    float: none;
    display: block;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
}
button:hover{
    background-color: #e74c3c;
}
.overlay{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.9);
}
.close-btn{
    position: absolute;
    right:0px;
    top:-30px;
    background-color: #fff;
    color: #333;
    width: 30px;
    text-align: center;
    line-height: 30px;
    height: 30px;
    font-size: 20px;
    cursor : pointer;
}
.popup-content{
    background-color: orange;
    width: 80%;
    position: absolute;
    left: 50%;
    top: 20%;
    margin-left: -40%;
    padding: 20px;
    color: #333;
    font-size: 14px;
}