Popup-modal

Create Modal Popup with HTML, CSS, and JavaScript

Table of Contents

Modal Popup Definition

In the realm of web development, a modal popup refers to a user interface element that overlays the main content, providing additional information or functionality. This guide explores how to create a modal popup using HTML, CSS, and JavaScript, ensuring a seamless user experience. Mastering the art of modal popups empowers developers to enhance website interactivity and engage visitors effectively.

a model popup is page element that displays in front of and deactivates all other page content. It may contain many helpful other forms, like :

  • Login / Signup
  • Contact For
  • Newsletter Signup
  • cookies Consent Message

in todays article, we will add a simple modal popup to our previous Navbar

Responsive Navbar with Search Box (HTML, CSS, JavaScript)

The popup modal will be added to the User Icon to display a Login / Signup form later

HTML Code

<!--This is a navbar right area contains icons and links-->
<div class="nav-right">
	<i class='bx bx-sm bx-search nav-right'></i>
	<i class='bx bx-sm bx-category'></i>
	<a href="#" id="openmodal"><i class='bx bx-sm bxs-user-circle'></i></a>
	<div id="modal" class="modal">

		<div class="modal-content">
		<i class='modal-close bx bx-x'></i>
			Modal Content
			<a href="https://www.dzcoding.com/" class="logo">DZCoding.com</a>
		</div>
	</div>
</div>

CSS Code

  /*Modal*/
  /* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    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 */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
	height: 50%;
	text-align: center;
}

/* The Close Button */
.modal-close {
    color: #aaaaaa;
    float: right;
    font-size: 18px;
    font-weight: bold;
}

.modal-close:hover,
.modal-close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

JAVASCRIPT Code

// Get the modal
var ebModal = document.getElementById('modal');

// Get the button that opens the modal
var ebBtn = document.getElementById("openmodal");

// Get the <span> element that closes the modal
var ebSpan = document.getElementsByClassName("modal-close")[0];

// When the user clicks the button, open the modal 
ebBtn.onclick = function() {
    ebModal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
ebSpan.onclick = function() {
    ebModal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == ebModal) {
        ebModal.style.display = "none";
    }
}

Thank you for reading our article on Modal Popup Using Html Css and Javascript. We hope that the information provided has been helpful in understanding the concept and implementation of modal popups. Stay connected with us for more insightful articles and updates in the future.

In next article we will add a Login / Registration Forms to our modal

Live Preview
Tags

Related Posts