How To Create A Popup Window In Html Using Javascript

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.

Are you want to get implementation help, or modify or enhance the functionality of this script? Submit Paid Service Request

If you have any questions about this script, submit it to our QA community - Ask Question