Creating a 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 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.


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 semicolonworld</p>         </div>     </div> </div> 


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() { = "block"; }  // close the mPopup once close element is clicked close.onclick = function() { = "none"; }  // close the mPopup when user clicks outside of the box window.onclick = function(event) {     if ( == mpopup) { = "none";     } } 


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; } 

Related Articles

Comments 0