Create a Modal pop up box using CSS and Javascript
Contents
Modal box in a Website
The Modal is a dialog box/pop up window that shows in the current page of the website. It creates a mode that disables the main window but keeps it visible with the modal window as a child window in front of it. Either user can make the action on the modal box or they can ignore this box by clicking outside of the modal box.
Use of Modal box
- It grabs the user’s attention and interrupts their task for important information
- It is used to get the user inputs for signup/login.
Examples for Modal box
- To get the email address from the user for the subscription on the website
- To show the Offers or other important Announcements
- To display the warning or error messages on the user actions
Creation of simple modal box using Javascript and CSS
Lets create the modal box for email subscription using Javascript and CSS. In this example, we are going to create the three files such as index.html, style.css and main.js under the same folder
Index.html
The button “subscribe to our newsletter” is created in the body. If user click’s this button, we need to show the modal box to get the user email address. The div element is “simpleModal” is created with the class name as “modal“.
Inside the div element, we have created the form with text box and button for email subscription.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Simple Modal</title> <link rel="stylesheet" href="style.css"> </head> <body> <button id="modalBtn" class="button">Subscribe to our newsletter </button> <!--- Modal box creation with text box and button for email subscription--> <div id="simpleModal" class="modal"> <div class="modal-content"> <span class="closeBtn">×</span> <p> Get instant updates</p> <form> <label for="email">Enter your email address</label> <input type="text" name="emailaddress"> <button type="button">Join now..It's Free!</button> </form> </div> </div> <script src="main.js"></script> </body> </html> |
style.css
The CSS properties are created for the html elements and modal box. The modal class properties are added to design the modal window. Similarly the style properties are added for the modal contents. Here modal contents are close button(X) , email address text box and Join now button.
Also animations are added for the modal contents using keyframe properties.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
body{ font-family: Arial, Helvetica, sans-serif; font-size: 20px; line-height: 1.6; } p{ font-size: 20px; color: red; } .button{ background: green; padding: 1em 2em; color: #fff; border: 0; } .button:hover{ background: #333; } .modal{ display: none; position: fixed; z-index: 1; left: 0; top: 0; height: 100%; width: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); } .modal-content{ background-color: #f4f4f4; margin: 20% auto; padding: 20px; width: 40%; box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 17); animation-name : modalopen; animation-duration : 1s; } .closeBtn{ color: #ccc; float: right; font-size: 30px; } .closeBtn:hover, .closeBtn:focus{ color: #000; text-decoration: none; cursor: pointer; } @keyframes modalopen{ from{ opacity: 0} to { opacity: 1} } |
main.js
User might perform the following actions in our web page.
- Click the subscribe button to get the email subscription box (modal box)
- Click the close button(x) on the modal box
- Click the outside of modal box.
For those actions, we need to define the respective functions in Javascript. To get the value from the HTML page, we have defined the variables using document.getElementById and document.getElementsByClassName.
Using that variable, we are calling the respective functions using addEventListener method.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
// Get modal element var modal = document.getElementById('simpleModal'); // Get open modal button var modalBtn = document.getElementById('modalBtn'); // Get close button var closeBtn = document.getElementsByClassName('closeBtn')[0]; // Listen for open click modalBtn.addEventListener('click', openModal); // Listen for close click closeBtn.addEventListener('click', closeModal); // Listen for outside click window.addEventListener('click', outsideClick); // Function to open modal function openModal(){ modal.style.display = 'block'; } // Function to close modal function closeModal(){ modal.style.display = 'none'; } // Function to close modal if outside click function outsideClick(e){ if(e.target == modal){ modal.style.display = 'none'; } } |
