Pure CSS Overlay Message Popup Modal Box

Are you fed up using boostrap modal box? you will be urged to use lot of css and jquery.
Do you want to code your own popup modal box? Here is the perfect solution for you.

This tutorial will help you to create overlay message popup box using CSS.

HTML Snippet

<div class="overlay-container">
<div class="black-overlay"></div>
<div class="popup">
<h1>Hello!!!</h1>
<p>
Pure CSS overlay Message popup modal box
</p>
</div>
</div>

CSS Snippet

.overlay-container {
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 10000;
    overflow: auto;
}
.black-overlay {
    display: block;
    position: fixed;
    top: 0%;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
}
.overlay-container .popup {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    max-width: 600px;
    max-height: 400px;
    height: 80%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    padding: 10px;
    text-align: center;
    z-index: 1000;
    background-color: #fff;
    border: 2px dashed #c5c5c5;
    box-shadow: 0 0 0 7px #fff;
}