Creating a Simple Modal Popup using JavaScript and CSS


create-simple-modal-popup-javascript-css-codexworld

A modal is a dialog box or popup, displayed over the current web page. A model popup helps to display additional information without reloading the page. The user can view the relative information on the popup box on the same page which provides better user experience.

Many jQuery plugins are available to implementing a popup on the web page. But if you want to use your own modal popup without using any third party jQuery plugins, this tutorial will help you to make a simple modal popup using JavaScript and CSS. This simple modal popup will less impact on page load time than the jQuery plugin. We’ll use JavaScript and CSS to create this simple popup and you can easily integrate this modal popup to the web page.

HTML

Add this Simple HTML to the web page where you want to show the modal popup. The following HTML contains an anchor link to open the modal popup and modal box content.

<!-- trigger the mPopup -->
<a href="javascript:void(0);" id="mpopupLink">Open Popup</a>

<!-- mPopup box -->
<div id="mpopupBox" class="mpopup">
    <!-- mPopup content -->
    <div class="mpopup-content">
        <div class="mpopup-head">
            <span class="close">×</span>
            <h2>Simple Modal Popup</h2>
        </div>
        <div class="mpopup-main">
            <p>This is a simple modal popup using JavaScript and CSS</p>
            <p>Please the content...</p>
        </div>
        <div class="mpopup-foot">
            <p>created by CodexWorld</p>
        </div>
    </div>
</div>

JavaScript

Add this JavaScript after the HTML code. Also follow the comment lines to understand the JavaScript code functionality.

// get the mPopup
var mpopup = document.getElementById('mpopupBox');

// get the link that opens the mPopup
var mpLink = document.getElementById("mpopupLink");

// get the close action element
var close = document.getElementsByClassName("close")[0];

// open the mPopup once the link is clicked
mpLink.onclick = function() {
    mpopup.style.display = "block";
}

// close the mPopup once close element is clicked
close.onclick = function() {
    mpopup.style.display = "none";
}

// close the mPopup when user clicks outside of the box
window.onclick = function(event) {
    if (event.target == mpopup) {
        mpopup.style.display = "none";
    }
}

CSS

The following CSS is used to style the modal popup, box content, close button, and add animation effects.

/* mPopup box style */
.mpopup {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.mpopup-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    width: 60%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

.mpopup-head {
    padding: 2px 16px;
    background-color: #ff0000;
    color: white;
}
.mpopup-main {padding: 2px 16px;}
.mpopup-foot {
    padding: 2px 16px;
    background-color: #ff0000;
    color: #ffffff;
}

/* add animation effects */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* close button style */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover, .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

Conclusion

We hope this sample script will help you to create your own popup and you can easily create a simple modal popup with CSS and JavaScript. Also, this simple popup can be easily customized based on your requirement.

Leave a reply

Connect With CodexWorld