Tech

How to Create Modal Boxes using HTML and CSS

How To Create Modal Boxes Using Html And Css

What is a Modal Boxes?

In user interface design for computer applications, a modal window is a graphical control element subordinate to an application’s main window. 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. Users must interact with the modal window before they can return to the parent application. This avoids interrupting the workflow on the main window. Modal windows are sometimes called heavy windows or modal dialogs because they often display a dialog box.

User interfaces typically use modal windows to command user awareness and to display emergency states, though interaction designers argue they are ineffective for that use. Modal windows are prone to mode errors.

On the Web, they often show images in detail, such as those implemented by Lightbox library.

The opposite of modal is modeless. Modeless windows don’t block the main window, so the user can switch their focus between them, treating them as palette windows.

 

Steps On How To Create Modal Boxes Using Html And Css

 

Step 1

Add HTML

<!– Trigger/Open The Modal –>

<button id=”myBtn”>Open Modal</button>

<!– The Modal –>

<div id=”myModal” class=”modal”>

 

<!– Modal content –>

<div class=”modal-content”>

<span class=”close”>x</span>

<p>Some text in the Modal..</p>

</div>

 

</div>

 

Step 2

Add CSS:

/* The Modal (background) */

.modal {

display: none; /* Hidden by default */

position: fixed; /* Stay in place */

z-index: 1; /* Sit on top */

left: 0;

top: 0;

width: 100%; /* Full width */

height: 100%; /* Full height */

overflow: auto; /* Enable scroll if needed */

background-color: rgb(0,0,0); /* Fallback color */

background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

 

/* Modal Content/Box */

.modal-content {

background-color: #fefefe;

margin: 15% auto; /* 15% from the top and centered */

padding: 20px;

border: 1px solid #888;

width: 80%; /* Could be more or less, depending on screen size */

}

/* The Close Button */

.close {

color: #aaa;

float: right;

font-size: 28px;

font-weight: bold;

}

.close:hover,

.close:focus {

color: black;

text-decoration: none;

cursor: pointer;

}

 

Step 3

Add JavaScript:

var modal = document.getElementById(‘myModal’);

 

// Get the button that opens the modal

var btn = document.getElementById(“myBtn”);

 

// Get the <span> element that closes the modal

var span = document.getElementsByClassName(“close”)[0];

 

// When the user clicks on the button, open the modal

btn.onclick = function() {

modal.style.display = “block”;

}

// When the user clicks on <span> (x), close the modal

span.onclick = function() {

modal.style.display = “none”;

}

// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event) {

if (event.target == modal) {

modal.style.display = “none”;

}

}

 

 


P.S. Thanks for reading this far! If you found value in this, we’d really appreciate it if you recommend this post (by clicking the share buttons) so other people can learn!

Found this Howto helpful? Subscribe for more!

You may also learn:

Comments
To Top