How to make a Modal/Popup window in HTML, CSS, and Javascript

by keshav

modal.png

In this article, we will learn how to make a simple modal/popup window using HTML, CSS, and Javascript. 

According to Wikipedia, In user interface design for computer applications, a modal window is a graphical control element subordinate to an application's main window.

A modal window provides a mode in which the primary window is disabled but remains visible, with the modal window acting as a child window in front of it. Before returning to the parent application, users must engage with the modal window. This prevents the main window's operation from being disrupted. Because they frequently display a dialog box, modal windows are sometimes known as heavy windows or modal dialogs.

To create a Modal in HTML, CSS, and Javascript what we do is we create a child window with related contents. The window is kept hidden using CSS and upon triggering (either by click event or time interval) it is displayed. The modal is provided with a close button to close it. Usually, modals are used to popup some offers, alerts, or to show subscribe options.

Following is the code to make a simple modal in HTML, CSS, and Javascript. In this, we have created a modal-wrapper div, where all the contents are placed. Inside the modal-wraper, we have a div with the class name Modal which is the actual modal window that holds all or modal contents. To trigger the modal we have a click me button. Also, the modal automatically pops up after 3s of page load. You can close the modal either by clicking on X  or by clicking on any space outside of the modal.

The code is easy to understand. We recommend you watch this video alongside the code. It will help you to understand the code better.

CODE:


See the Pen
Simple Modal by Vidyasheela (@_vidyasheela)
on CodePen.


Also read:

 

No Comments

Post a Comment

Website Components