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


<!– 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>





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: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() { = “block”;


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

span.onclick = function() { = “none”;


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

window.onclick = function(event) {

if ( == modal) { = “none”;





P.S. Thanks for reading to the end. If you found value in this, kindly recommend (by clicking the share buttons below) so other people can learn too!
Is there a Howto you'd love to learn? We'll be glad to create it for you, let us know in the comments. Cheers!


We're always here. You can send us an email and we'll get back to you, asap.


© 2015 - 2018


Log in with your credentials

Forgot your details?