Create a Modal Popup using jQuery
Today, we’ll discuss how to create a Modal Popup using jQuery.
We may always need to open a popup in a web application to show information, feedback, contact form or confirmation. Using the jQuery library we can easily implement the custom popup. A popup window opens without interacting with current web page elements.
You may also like the following articles.
- How to implement jQuery select2 multiple select plugin in PHP
- Drag and drop multiple file upload using jQuery, Ajax, and PHP
- Bootstrap Colorpicker Example using JQuery
- Create simple Popup in ReactJS
Demo Example
Here, you will see how to create a custom popup modal using jQuery and CSS.
Steps to create Popup modal using jQuery
1. Create an HTML
First, we will create an index.html file and paste the following HTML code that creates modal popup.
index.html
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> <head> <title>Create a Modal Popup using jQuery - Clue Mediator</title> </head> <body> <h2>Create a Modal Popup using jQuery - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h2> <a class="openBtn" href="javascript:void(0)"> Click to open Popup </a> <div class="popup"> <div class="popup-content"> <h2>Popup Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <a class="closeBtn" href="javascript:void(0)">x</a> </div> </div> </body> </html> |
2. Add CSS
Now, we need to style the popup so that we will add the following CSS in the index.html file before the closing head (</head>) tag.
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 | <style type="text/css"> body { font-family: Helvetica, Arial, sans-serif; } p { font-size: 16px; line-height: 26px; letter-spacing: 0.5px; color: #4f4343; } /* Popup open button */ .openBtn { color: #FFF; background: #269faf; padding: 10px; text-decoration: none; border: 1px solid #269faf; border-radius: 3px; } .openBtn:hover { background: #35c7db; } .popup { position: fixed; top: 0px; left: 0px; background: rgba(0, 0, 0, 0.58); width: 100%; height: 100%; display: none; } /* Popup inner div */ .popup-content { width: 600px; margin: 0 auto; padding: 40px; margin-top: 100px; border-radius: 3px; background: #fff; position: relative; } /* Popup close button */ .closeBtn { position: absolute; top: 5px; right: 12px; font-size: 17px; color: #7c7575; text-decoration: none; } </style> |
3. Write a jQuery script
We have to add the following jQuery library in the head section of the page.
1 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> |
Finally, we will write a jQuery script to trigger the action whenever users click to open/close a popup window.
Add the following script in the index.html file before the closing body (</body>) tag.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <script type="text/javascript"> $(document).ready(function () { // Open Popup $('.openBtn').on('click', function () { $('.popup').fadeIn(300); }); // Close Popup $('.closeBtn').on('click', function () { $('.popup').fadeOut(300); }); // Close Popup when Click outside $('.popup').on('click', function () { $('.popup').fadeOut(300); }).children().click(function () { return false; }); }); </script> |
4. Output
Let’s combine all code together and see how it looks.
index.html
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 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | <!DOCTYPE html> <html> <head> <title>Create a Modal Popup using jQuery - Clue Mediator</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <style type="text/css"> body { font-family: Helvetica, Arial, sans-serif; } p { font-size: 16px; line-height: 26px; letter-spacing: 0.5px; color: #4f4343; } /* Popup open button */ .openBtn { color: #FFF; background: #269faf; padding: 10px; text-decoration: none; border: 1px solid #269faf; border-radius: 3px; } .openBtn:hover { background: #35c7db; } .popup { position: fixed; top: 0px; left: 0px; background: rgba(0, 0, 0, 0.58); width: 100%; height: 100%; display: none; } /* Popup inner div */ .popup-content { width: 600px; margin: 0 auto; padding: 40px; margin-top: 100px; border-radius: 3px; background: #fff; position: relative; } /* Popup close button */ .closeBtn { position: absolute; top: 5px; right: 12px; font-size: 17px; color: #7c7575; text-decoration: none; } </style> </head> <body> <h2>Create a Modal Popup using jQuery - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h2> <a class="openBtn" href="javascript:void(0)"> Click to open Popup </a> <div class="popup"> <div class="popup-content"> <h2>Popup Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id laborum.</p> <a class="closeBtn" href="javascript:void(0)">x</a> </div> </div> <script type="text/javascript"> $(document).ready(function () { // Open Popup $('.openBtn').on('click', function () { $('.popup').fadeIn(300); }); // Close Popup $('.closeBtn').on('click', function () { $('.popup').fadeOut(300); }); // Close Popup when Click outside $('.popup').on('click', function () { $('.popup').fadeOut(300); }).children().click(function () { return false; }); }); </script> </body> </html> |
Run the project and check the output in the browser.
I hope you find this article is helpful.
Thank you for reading. Happy Coding..!! 🙂
