Home Web Design CSS CSS Modal Box With Overlay | HTML CSS jQuery Modal

CSS Modal Box With Overlay | HTML CSS jQuery Modal

June 30, 2019

19253

How we can create a dialog or modal box using HTML CSS & JS? Solution: CSS Modal Box With Overlay, HTML CSS jQuery Modal or Dailog Box.

Maybe you have seen many types of the modal box in many places, Some peoples call is Dialog box also. For example, when we log out from facebook there a confirmation appears to are you sure, that’s called dialog modal box. Like that there some other major modal box like datepicker, alert to users, etc are called modal.

Today you will learn to create a dialog or modal box using HTML CSS & jQuery. Basically, I used the jQuery for the button, the modal box appears on button click that’s function handled by jQuery. If you want to create this without jQuery or JavaScript, then see my one of the previous post for creating Popup With Pure CSS.

So, Today I am sharing CSS Modal Box With Overlay. In other words, A modal box with the overlay features using HTML, CSS, & JQuery. I am using a basic login form in the modal box, you can change this section as you want. As I told this has an overlay feature, after opening the modal box there will a color appears with low opacity that’s called overlay. If you don’t know about overlay, then check out my this post: CSS Overlay Menu.

If you are thinking now how this dialog or modal box actually is, then see the preview given here below.

Preview Of jQuery Modal Dialogs With Overlay

See this video preview to getting an idea of how this modal box looks like.

https://webdevtrick.com/wp-content/uploads/modal-jquery-css.mp4?_=1

Now you can see this visually. If you like this, then get the source code of its.

How I created This Login Dialog Box

Before sharing source code, let’s talk about it. As I told you, I am using a Login Form with the modal box. For creating the modal box, I created a Div with class name “modal“. Inside the box, I placed two inputs for Username & Password field, a heading & a login button. I added a code on the main div called “modal” after the class name aria-hidden="true" (get info). Basically, this code is for hiding the modal box, it will appear on button click using jQuery.

Inside the modal box, I have created a close button to close the element and placed it on the right top position. Also in this element, I add the aria-hidden="true" command. After hiding the modal box, I created a button to show it. Using hyperlink tag I have created the button with heading “Open Modal Box“. In this button, I have added the class name “openmodal” and in the close button on box, I added the class named “closemodal”.

In the jQuery section, we handling the close & open feature of the modal box. When we click on the button named “Open Modal Box” then jQuery add a class “opened” on the main div with replacing aria-hidden="true" . The same way when we click on the close button then jQuery removes the “opened” class.

Most of the works are in CSS, that’s why I am calling it CSS Modal Box. In the CSS section, I have put all the styles, position, etc. For creating the close button icon I placed an HTML symbol code × that’s creating a cross icon. Using CSS I have also styled this and place it in the perfect position. For creating the overlay feature, I have put a background color with low opacity when our modal box is active or opened.

CSS Modal Box With Overlay Source Code

That is the whole concept there is nothing left to explain, Left other things you will understand after getting the codes. For creating this Dialog Box, You have to create 3 files. First for HTML, second for CSS, & the last for JavaScript or jQuery. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html’ and put these codes given below.

<!DOCTYPE html>
<!-- code by webdevtrick (https://webdevtrick.com)  -->
<html>

<head>
  <meta charset="UTF-8">
  <title>CSS Overylay Modal Box | Webdevtrick.com</title>
      <link rel="stylesheet" href="style.css">
</head>

<body>
<div class="modal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-header">
      <h2>Login Your Account</h2>
      <a href="#" class="btn-close closemodal" aria-hidden="true">&times;</a>
    </div>
    <div class="modal-body">
      <input type="text" name="user" placeholder="Username" size="20" /><br>
      <input type="text" name="pass" placeholder="Password" size="20" /></div>
    <div class="modal-footer">
  
      <a href="#" class="btn">Login</a>
    </div>
  </div>
</div>

  <h1>Modal Box With Overlay</h1>
  <p><a href="#" class="btn btn-big openmodal">Open Modal Box</a></p>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

    <script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS Overylay Modal Box | Webdevtrick.com</title>

</head>

<body>

<h2>Login Your Account</h2>

</div>

<a href="#" class="btn">Login</a>

</div>

<h1>Modal Box With Overlay</h1>

<p><a href="#" class="btn btn-big openmodal">Open Modal Box</a></p>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ & put these codes.

/** code by webdevtrick (https://webdevtrick.com) **/
body{
  font-family:sans-serif;
  color:#333;
  text-align:center;
}
h1{
  margin:80px 0
}
.btn {
  background: #e60023;
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  padding: 8px 15px;
  text-decoration: none;
  text-align: center;
  min-width: 60px;
  position: relative;
  transition: color .1s ease;
}
.btn:hover {
  background: #c72339;
}
.btn.btn-big {
  font-size: 18px;
  padding: 15px 20px;
  min-width: 100px;
}
.btn-close {
  color: #e60023;
  font-size: 30px;
  text-decoration: none;
  padding:10px;
  position: absolute;
  right: 7px;
  top: 0;
}
.btn-close:hover {
  color: #333;
}
.modal:before {
  content: "";
  display: none;
  background: rgb(230,0,35,0.3);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.opened:before {
  display: block;
}
.opened .modal-dialog {
  transform: translate(0, 0);
  top: 20%;
}
.modal-dialog {
  background: #fefefe;
  border: #333333 solid 0px;
  border-radius: 5px;
  margin-left: -200px;
  text-align:center;
  position: fixed;
  left: 50%;
  top: -100%;
  z-index: 11;
  width: 450px;
  box-shadow:0 5px 10px rgba(0,0,0,0.3);
  transform: translate(0, -500%);
  transition: transform 0.3s ease-out;
}
.modal-body {
  padding: 20px;
}
.modal-body input{
  width:200px;
  padding:8px;
  border:1px solid #ddd;
  color:#888;
  outline:0;
  font-size:14px;
  font-weight:bold;
  margin-top: 10px;
}
.modal-header,
.modal-footer {
  padding: 10px 20px;
}
.modal-header {
  border-bottom: #eeeeee solid 1px;
}
.modal-header h2 {
  font-size: 20px;
}

/** code by webdevtrick (https://webdevtrick.com) **/

body{

font-family:sans-serif;

color:#333;

text-align:center;

}

h1{

margin:80px 0

}

.btn {

background: #e60023;

border-radius: 3px;

color: #fff;

display: inline-block;

font-size: 14px;

padding: 8px 15px;

text-decoration: none;

text-align: center;

min-width: 60px;

position: relative;

transition: color .1s ease;

}

.btn:hover {

background: #c72339;

}

.btn.btn-big {

font-size: 18px;

padding: 15px 20px;

min-width: 100px;

}

.btn-close {

color: #e60023;

font-size: 30px;

text-decoration: none;

padding:10px;

position: absolute;

right: 7px;

top: 0;

}

.btn-close:hover {

color: #333;

}

.modal:before {

content: "";

display: none;

background: rgb(230,0,35,0.3);

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

z-index: 10;

}

.opened:before {

display: block;

}

.opened .modal-dialog {

transform: translate(0, 0);

top: 20%;

}

.modal-dialog {

background: #fefefe;

border: #333333 solid 0px;

border-radius: 5px;

margin-left: -200px;

text-align:center;

position: fixed;

left: 50%;

top: -100%;

z-index: 11;

width: 450px;

box-shadow:0 5px 10px rgba(0,0,0,0.3);

transform: translate(0, -500%);

transition: transform 0.3s ease-out;

}

.modal-body {

padding: 20px;

}

.modal-body input{

width:200px;

padding:8px;

border:1px solid #ddd;

color:#888;

outline:0;

font-size:14px;

font-weight:bold;

margin-top: 10px;

}

.modal-header,

.modal-footer {

padding: 10px 20px;

}

.modal-header {

border-bottom: #eeeeee solid 1px;

}

.modal-header h2 {

font-size: 20px;

}

function.js

The last step, Create a JS file for jQuery function named ‘function.js‘ and put the codes.

/** code by webdevtrick (https://webdevtrick.com) **/
$('.openmodal').click(function (e) {
         e.preventDefault();
         $('.modal').addClass('opened');
    });
$('.closemodal').click(function (e) {
         e.preventDefault();
         $('.modal').removeClass('opened');
    });

/** code by webdevtrick (https://webdevtrick.com) **/

$('.openmodal').click(function (e) {

e.preventDefault();

$('.modal').addClass('opened');

});

$('.closemodal').click(function (e) {

e.preventDefault();

$('.modal').removeClass('opened');

});

That’s It. Now you have successfully created a CSS Modal Box With Overlay. In other words, A modal or dialog box with overlay screen using HTML CSS & jQuery. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

16 COMMENTS

DARPAN ANEJA June 30, 2019 At 5:43 am

Bhai kaha se seekh rha hai? Btane mein sharmata kyu hai?

Reply
- shaan June 30, 2019 At 7:18 am
  
  are bhai me kaha sharma rha hu? facebook groups se inspitation leta hu. BTW I like your comment brother.
  
  Reply
Vatsal Bhakodia June 30, 2019 At 6:25 am

How to make a pop up to add the website to Home page of device

Reply
- shaan June 30, 2019 At 7:17 am
  
  If you are using wordpress, then you can use hellobar
  
  Reply
  - Vatsal Bhakodia June 30, 2019 At 12:44 pm
    
    Thanks and how to make bell icon that you are having in your site , the red one , on pressing chrome sends notification .
    
    Reply
Vatsal Bhakodia June 30, 2019 At 12:47 pm

Please have look on my website https://gamingspot.ga/
It’s a online gaming website .
And can I have your email address ?

Reply
- shaan June 30, 2019 At 5:56 pm
  
  contact@webdevtrick.com
  
  Reply
Abdul Muttaqin June 30, 2019 At 2:44 pm

How to make a popup modal box , but only first time

example , i visit some web , and the web showing popup subscribe button

then when i visit it again , the subscribe button isn’t showing again

Reply
- shaan June 30, 2019 At 4:43 pm
  
  If you want to add on WordPress the user “Hellobar” google this.
  
  Reply
  - Abdul Muttaqin July 2, 2019 At 4:46 pm
    
    no bro , i wanna make in my own landing page
    
    Reply
K Vinayak June 30, 2019 At 4:58 pm

This can be made without js. Using input radio buttons with same ‘name’ inside label elements as close and open buttons. Then use, say, input.modalopen:checked > div for expanding the box and input.modalopen:not(:checked) > div for closing the box.

Reply
- shaan June 30, 2019 At 5:04 pm
  
  Thanks for your suggestion bro, Yes I have previously shared one without JS, I have also mentioned in this post.
  
  Reply
Johnbosco August 26, 2019 At 5:24 am

Thanks brother for educated us here

Reply
- shaan August 26, 2019 At 6:01 am
  
  It’s my pleasure, Stay connected.
  
  Reply
Kent Sor April 30, 2021 At 5:00 pm

Informative, thanks for posting. I’d like to know how to extract and respond to the inputs that the user provides in such a modal dialog. It doesn’t have to be complicated or realistic, for example just show how one page is opened if the user enters “abc” as the username and another if the user enters “def” as the username.

Reply
Jquery Login Modal - logininfos.com April 24, 2022 At 9:06 pm

[…] CSS Modal Box With Overlay HTML CSS jQuery Modal […]

Reply