Hello Friends, Today in this post, we’ll learn How To Build a Custom Popup Modal box using HTML, CSS & JQuery. Recently I have shared a post, Responsive Full-Screen Image Slider | Hero Slider. but our today’s topic is Build a Custom Popup Modal box using HTML, CSS & JQuery.
A modal box is a popup window that forces the users to interact with it before returning to the site. Modal boxes are useful for warnings, informational boxes, and much more. You can create a modal box with jQuery. If you are familiar with jQuery, You can create it also with a bootstrap modal box.
In this article, you’ll learn how to build JQuery popup modals (popup windows) without using a framework like Bootstrap, or a third-party library. We’ll build the whole thing from pure css, giving us complete control over how it works and look.
The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area and can be moved, resized, and closed with the ‘x’ icon by default.
Please consult with your IT professional for advice and guidance on an appropriate library. This specific product may or may not meet your needs. Pair Networks, Inc. is providing support for this tutorial for your convenience and is not responsible for jQuery’s performance.
Please read carefully the terms and scope of services for any online service or product you are considering purchasing or using. In order to create a modal pop-up you first all to establish the HTML structure.
You have to create classes for the pop-up overlay and pop-up content so that you may edit them separately from the rest of the document. This example creates the “popup-overlay” and “popup-content” classes to enable CSS to style it specifically.
Take notice of the button elements in the below example. We added buttons that we want to trigger the pop-up. One button has been given the open cookies and another one for the open logged these will be used later to open and close the popup.
Now, we don’t want the popup to be hidden forever, so we need to make a special use case in the CSS for when the popup should be shown. We’re going to use jQuery to help determine when the popup should be visible.
jQuery has the ability to add and remove classes based on actions (like click). So, if we program jQuery to add a class called “active” when the “open” button is clicked, we can use the “active” class in CSS to show the popup.
Append the “active” class to the pop-up classes and create a new styling for when the pop-up is visible. Now it’s time to add the jQuery. Be sure to set up your HTML document for jQuery before adding any jQuery code.
If you are unsure how to do so, see our Getting Your HTML Ready for jQuery article. So when the “Open” and “Close” HTML buttons are clicked, jQuery needs to add or remove the “active” class.
When this happens, the “active” class is appended to the pop-up classes, thus changing the pop-up’s visibility to “visible.” In other words, the pop-up will appear. This second statement removes the “active” class when the “Close” button is clicked.
When this happens, the “active” class is removed from the pop-up classes, causing them to revert to their previous styling that has the visibility set to hidden. Add both statements of jQuery to your document. If all this is completed correctly, you will have a rudimentary modal pop-up box.
For any doubts and queries, feel free to leave comments below. Remember to subscribe to our channel. Do share the tutorial if you think it’s worth it.