Create Simple Modal Popup using JavaScript and CSS

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 a better user experience.

There are various plugins are available to implement modal popup on the web page using jQuery. But if you want to use your own modal popup without using any third-party jQuery plugins, this example script helps you to make a simple modal popup using JavaScript and CSS. This modal popup will less impact 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.

Modal HTML

Define HTML elements to create a modal wrapper and content area in the web page.

• Add an anchor link to trigger modal to open popup and modal box content.
• In the modal popup, a close icon is placed that helps to close the modal.

<!-- Link to trigger modal -->
<a href="javascript:void(0);" class="btn btn-primary" id="mpopupLink">Launch Modal Popup</a>

<!-- Modal popup box -->
<div id="mpopupBox" class="mpopup">
    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-header">
            <span class="close">×</span>
            <h2>Simple Modal Popup</h2>
        </div>
        <div class="modal-body">
            <p>This is a modal popup created with JavaScript and CSS</p>
            <p>Insert content here...</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

JavaScript

The following JavaScript code is used to open and close the modal on clicking the trigger link.

• JavaScript onclick() event is used to handle the click event.

<script>
// Select modal
var mpopup = document.getElementById('mpopupBox');

// Select trigger link
var mpLink = document.getElementById("mpopupLink");

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

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

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

// Close modal when user clicks outside of the modal box
window.onclick = function(event) {
    if (event.target == mpopup) {
        mpopup.style.display = "none";
    }
};
</script>

Note that: Add this JavaScript after the HTML code. Also, follow the comment lines to understand the JavaScript code functionality.

CSS

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

.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);
}
.modal-content {
    position: relative;
    background-color: #fff;
    margin: auto;
    padding: 0;
    width: 450px;
    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;
    border-radius: 0.3rem;
}
.modal-header {
    padding: 2px 12px;
    background-color: #ffffff;
    color: #333;
    border-bottom: 1px solid #e9ecef;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
}
.modal-header h2{
    font-size: 1.25rem;
    margin-top: 14px;
    margin-bottom: 14px;
}
.modal-body {
    padding: 2px 12px;
}
.modal-footer {
    padding: 1rem;
    background-color: #ffffff;
    color: #333;
    border-top: 1px solid #e9ecef;
    border-bottom-left-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
    text-align: right;
}

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

/* 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}
}

Conclusion

This sample script will help you to create a custom popup and you can easily create a simple modal popup with CSS and JavaScript. The CSS can be customized to make the modal style compatibility the website UI. For example, we have added only text content in the modal box. You can customize to add HTML form elements or dynamic content in the modal popup.