Modal Dialog Box – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Tue, 22 Nov 2022 17:17:52 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Popup Share Modal UI Design using HTML CSS & JavaScript https://www.codingnepalweb.com/popup-share-modal-ui-design-javascript/ https://www.codingnepalweb.com/popup-share-modal-ui-design-javascript/#comments Wed, 07 Apr 2021 13:01:00 +0000 Popup Share Modal UI Design using HTML CSS & JavaScriptHey friends, today in this blog you’ll learn how to create a Popup Share Modal UI Design using HTML CSS & JavaScript. In the previous blog, I have shared how to create a Poll UI Design in HTML CSS & JavaScript and now it’s time to create Share Modal. If you’re looking for some other type of modals then click here to view them all.

In this project [Popup Share Modal UI Design], at first, on the webpage, there is a view modal button, when you click on that button then the modal box appears with a popup animation. In this share modal box, there are some social media icons with pretty cool hover animation and an input box to copy the link. There is also a close icon to the right top corner to hide this modal box. To show or hide the Modal Box and copy the given link, I used JavaScript.

Video Tutorial of Popup Share Modal UI Design

 
In the video, you have seen the demo of this share modal box and how I created it. As I already told you, I used HTML & CSS to create the layout/design of this modal and JavaScript to show or hide the modal and to copy the given link. If you’re a beginner and you don’t know about JavaScript then you may have little difficulty understanding the JavaScript codes of this modal box.

But I have tried to explain the JavaScript codes by written comments. So please watch the video two or more times and then try to make it by yourself instead of depending on the source codes or files. In case you won’t make this modal or somehow you’ll get errors then don’t worry I have given source codes and files for free. Just scroll down and recheck your codes with the given codes or download the code files.

JavaScript Methods that are used on this project are: InputElement.select() and execCommand().

InputElement.select(): This method selects all text or values in an element that contains a text field (<textarea>, <input>).

execCommand(): This method executes the specified command for the selected part of an editable element and in our case, we have passed copy and it’ll copy the selected input field values.

You might like this:

Popup Share Modal UI Design [Source Codes]

To create this program [Share Modal]. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. You can also download the source code files of this Popup Share Modal from the given download button.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Popup Share Modal | CodingNepal</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/line.css">
</head>
<body>
  <button class="view-modal">View Modal</button>
  <div class="popup">
    <header>
      <span>Share Modal</span>
      <div class="close"><i class="uil uil-times"></i></div>
    </header>
    <div class="content">
      <p>Share this link via</p>
      <ul class="icons">
        <a href="#"><i class="fab fa-facebook-f"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-whatsapp"></i></a>
        <a href="#"><i class="fab fa-telegram-plane"></i></a>
      </ul>
      <p>Or copy link</p>
      <div class="field">
        <i class="url-icon uil uil-link"></i>
        <input type="text" readonly value="example.com/share-link">
        <button>Copy</button>
      </div>
    </div>
  </div>

  <script>
    const viewBtn = document.querySelector(".view-modal"),
    popup = document.querySelector(".popup"),
    close = popup.querySelector(".close"),
    field = popup.querySelector(".field"),
    input = field.querySelector("input"),
    copy = field.querySelector("button");

    viewBtn.onclick = ()=>{
      popup.classList.toggle("show");
    }
    close.onclick = ()=>{
      viewBtn.click();
    }

    copy.onclick = ()=>{
      input.select(); //select input value
      if(document.execCommand("copy")){ //if the selected text copy
        field.classList.add("active");
        copy.innerText = "Copied";
        setTimeout(()=>{
          window.getSelection().removeAllRanges(); //remove selection from document
          field.classList.remove("active");
          copy.innerText = "Copy";
        }, 3000);
      }
    }
  </script>

</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  /* background: #f2f3fb; */
  background: #7d2ae8;
}
::selection{
  color: #fff;
  background: #7d2ae8;
}
.view-modal, .popup{
  position: absolute;
  left: 50%;
}
button{
  outline: none;
  cursor: pointer;
  font-weight: 500;
  border-radius: 4px;
  border: 2px solid transparent;
  transition: background 0.1s linear, border-color 0.1s linear, color 0.1s linear;
}
.view-modal{
  top: 50%;
  color: #7d2ae8;
  font-size: 18px;
  padding: 10px 25px;
  background: #fff;
  transform: translate(-50%, -50%);
}
.popup{
  background: #fff;
  padding: 25px;
  border-radius: 15px;
  top: -150%;
  max-width: 380px;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
  transform: translate(-50%, -50%) scale(1.2);
  transition: top 0s 0.2s ease-in-out,
              opacity 0.2s 0s ease-in-out,
              transform 0.2s 0s ease-in-out;
}
.popup.show{
  top: 50%;
  opacity: 1;
  pointer-events: auto;
  transform:translate(-50%, -50%) scale(1);
  transition: top 0s 0s ease-in-out,
              opacity 0.2s 0s ease-in-out,
              transform 0.2s 0s ease-in-out;

}
.popup :is(header, .icons, .field){
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.popup header{
  padding-bottom: 15px;
  border-bottom: 1px solid #ebedf9;
}
header span{
  font-size: 21px;
  font-weight: 600;
}
header .close, .icons a{
  display: flex;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}
header .close{
  color: #878787;
  font-size: 17px;
  background: #f2f3fb;
  height: 33px;
  width: 33px;
  cursor: pointer;
}
header .close:hover{
  background: #ebedf9;
}
.popup .content{
  margin: 20px 0;
}
.popup .icons{
  margin: 15px 0 20px 0;
}
.content p{
  font-size: 16px;
}
.content .icons a{
  height: 50px;
  width: 50px;
  font-size: 20px;
  text-decoration: none;
  border: 1px solid transparent;
}
.icons a i{
  transition: transform 0.3s ease-in-out;
}
.icons a:nth-child(1){
  color: #1877F2;
  border-color: #b7d4fb;
}
.icons a:nth-child(1):hover{
  background: #1877F2;
}
.icons a:nth-child(2){
  color: #46C1F6;
  border-color: #b6e7fc;
}
.icons a:nth-child(2):hover{
  background: #46C1F6;
}
.icons a:nth-child(3){
  color: #e1306c;
  border-color: #f5bccf;
}
.icons a:nth-child(3):hover{
  background: #e1306c;
}
.icons a:nth-child(4){
  color: #25D366;
  border-color: #bef4d2;
}
.icons a:nth-child(4):hover{
  background: #25D366;
}
.icons a:nth-child(5){
  color: #0088cc;
  border-color: #b3e6ff;
}
.icons a:nth-child(5):hover{
  background: #0088cc;
}
.icons a:hover{
  color: #fff;
  border-color: transparent;
}
.icons a:hover i{
  transform: scale(1.2);
}
.content .field{
  margin: 12px 0 -5px 0;
  height: 45px;
  border-radius: 4px;
  padding: 0 5px;
  border: 1px solid #e1e1e1;
}
.field.active{
  border-color: #7d2ae8;
}
.field i{
  width: 50px;
  font-size: 18px;
  text-align: center;
}
.field.active i{
  color: #7d2ae8;
}
.field input{
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 15px;
}
.field button{
  color: #fff;
  padding: 5px 18px;
  background: #7d2ae8;
}
.field button:hover{
  background: #8d39fa;
}

That’s all, now you’ve successfully created a Share Modal UI using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

 

]]> https://www.codingnepalweb.com/popup-share-modal-ui-design-javascript/feed/ 14 Popup Login Form Design in HTML & CSS https://www.codingnepalweb.com/popup-login-form-design-html-css/ https://www.codingnepalweb.com/popup-login-form-design-html-css/#comments Wed, 01 Jul 2020 07:47:00 +0000 https://codingnepalweb.com/2020/07/01/popup-login-form-design-in-html-css/ Popup Login Form Design in HTML & CSS

Hello readers, Today in this blog you’ll learn how to create a Popup Login Form Design using only HTML & CSS. Earlier I have shared many blogs on how to create Login Form Design with Password Show Hide Toggle Button. And, now I’m going to create a Modal Login Form using only HTML & CSS.

Popup boxes (or dialog boxes) are modal windows used to inform or alert the user, or to get input from the user. Popup boxes restrict the user from accessing other features of a program until the popup is closed, so they should not be overused.

As you have seen on many websites there is a dialog box that is based on JavaScript or JavaScript library. But today I’ll share with you this program (Popup or Modal Login Form) using only HTML & CSS. In this program, at first, on the webpage, there is a white button with “View Form” text. And when you click on that button then the Popup or Modal Login Form will be displayed.

If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Popup or Modal Login Form).

Video Tutorial of Modal or Popup Login Form Design

 
As you have seen the pure CSS Modal or Popup Login Form Design in the video. This form is very simple and easy to create. If you are a beginner and you know HTML & CSS then you can also create this type of Modal or Popup Login Form. But if you know JavaScript then you can add advanced features in this form and take this program at the next level.

If you like this program (Popup or Modal Login Form) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this Modal or Popup Login Form on your websites, projects, and HTML pages.

You might like this:

Modal or Popup Login Form Design [Source Codes]

To create this program (Popup or Modal Login Form). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Popup Login Form Design | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
      <div class="center">
         <input type="checkbox" id="show">
         <label for="show" class="show-btn">View Form</label>
         <div class="container">
            <label for="show" class="close-btn fas fa-times" title="close"></label>
            <div class="text">
               Login Form
            </div>
            <form action="#">
               <div class="data">
                  <label>Email or Phone</label>
                  <input type="text" required>
               </div>
               <div class="data">
                  <label>Password</label>
                  <input type="password" required>
               </div>
               <div class="forgot-pass">
                  <a href="#">Forgot Password?</a>
               </div>
               <div class="btn">
                  <div class="inner"></div>
                  <button type="submit">login</button>
               </div>
               <div class="signup-link">
                  Not a member? <a href="#">Signup now</a>
               </div>
            </form>
         </div>
      </div>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  height: 100vh;
  width: 100%;
  background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
}
.show-btn{
  background: #fff;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 500;
  color: #3498db;
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.show-btn, .container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input[type="checkbox"]{
  display: none;
}
.container{
  display: none;
  background: #fff;
  width: 410px;
  padding: 30px;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
#show:checked ~ .container{
  display: block;
}
.container .close-btn{
  position: absolute;
  right: 20px;
  top: 15px;
  font-size: 18px;
  cursor: pointer;
}
.container .close-btn:hover{
  color: #3498db;
}
.container .text{
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}
.container form{
  margin-top: -20px;
}
.container form .data{
  height: 45px;
  width: 100%;
  margin: 40px 0;
}
form .data label{
  font-size: 18px;
}
form .data input{
  height: 100%;
  width: 100%;
  padding-left: 10px;
  font-size: 17px;
  border: 1px solid silver;
}
form .data input:focus{
  border-color: #3498db;
  border-bottom-width: 2px;
}
form .forgot-pass{
  margin-top: -8px;
}
form .forgot-pass a{
  color: #3498db;
  text-decoration: none;
}
form .forgot-pass a:hover{
  text-decoration: underline;
}
form .btn{
  margin: 30px 0;
  height: 45px;
  width: 100%;
  position: relative;
  overflow: hidden;
}
form .btn .inner{
  height: 100%;
  width: 300%;
  position: absolute;
  left: -100%;
  z-index: -1;
  background: -webkit-linear-gradient(right, #56d8e4, #9f01ea, #56d8e4, #9f01ea);
  transition: all 0.4s;
}
form .btn:hover .inner{
  left: 0;
}
form .btn button{
  height: 100%;
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}
form .signup-link{
  text-align: center;
}
form .signup-link a{
  color: #3498db;
  text-decoration: none;
}
form .signup-link a:hover{
  text-decoration: underline;
}

That’s all, now you’ve successfully created a Popup Login Form Design in HTML & CSS. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.

]]> https://www.codingnepalweb.com/popup-login-form-design-html-css/feed/ 20 Popup Subscription Form using HTML CSS & Javascript https://www.codingnepalweb.com/popup-subscription-form-javascript/ https://www.codingnepalweb.com/popup-subscription-form-javascript/#comments Wed, 13 May 2020 09:36:00 +0000 https://codingnepalweb.com/2020/05/13/popup-subscription-form-using-html-css-javascript/ Popup Subscription Form using HTML CSS and Javascript

Hello readers, Today in this blog you’ll learn how to create a Popup Subscription Form or Modal Box using HTML CSS & Javascript. Earlier I have shared a Minimal To-Do List using HTML CSS & Javascript, now it’s time to create a Popup Email Subscription Form.

An email subscription is an option on a website that allows visitors to receive news and updates through email by specifying their email addresses in a subscription form.

As you can see in the image, this is a Popup Email Subscription Form based on HTML CSS & Javascript. At first, there is only a button shown but when you clicked on that button then this subscription form will appear. There is a smooth sliding effect too that’ means when you clicked on the button this form will slide from the top side.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Popup Subscription Form).

Video Tutorial of Popup Subscription Form using Javascript

 
If you’re a beginner and have some basic knowledge about HTML & CSS then you can also create this type of subscription form, modal dialog boxes. You can use this popup subscription form on your sites, projects, and anywhere you want.

If you like this program (Popup Subscription Form) and want to get source codes. You can easily get the source codes of this program (Popup Email Subscription Form). To get the source codes you just need to scroll down. And, I believe this program will help you a lot.

Popup Subscription Form or Modal Dialog Box [Source Codes]

To create this program (Popup Subscription Form). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Sliding Modal Box Style</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
      <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
   <body>
      <div class="start-btn">
         <a href="#">View Modal</a>
      </div>
      <div class="center modal-box">
         <div class="fas fa-times"></div>
         <div class="fas fa-envelope icon1"></div>
         <header>Don't miss updates from us!</header>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, suscipit, pers
         </p>
         <form action="">
            <div class="fas fa-envelope icon2"></div>
            <input type="email" required placeholder="abc@example.com">
            <button>Subscribe</button>
         </form>
         <div class="icons">
            <i class="fab fa-facebook-f"></i>
            <i class="fab fa-twitter"></i>
            <i class="fab fa-instagram"></i>
            <i class="fab fa-youtube"></i>
         </div>
      </div>
      <script>
         $(document).ready(function(){
           $('.start-btn').click(function(){
             $('.modal-box').toggleClass("show-modal");
             $('.start-btn').toggleClass("show-modal");
           });
           $('.fa-times').click(function(){
             $('.modal-box').toggleClass("show-modal");
             $('.start-btn').toggleClass("show-modal");
           });
         });
      </script>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Lobster+Two:700|Poppins&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  text-align: center;
  background: #44d1ee;
  font-family: 'Poppins',sans-serif;
}
::selection{
  color: white;
  background: #48DBFB;
}
.center,.start-btn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.start-btn a{
  font-size: 25px;
  background: white;
  color: #48DBFB;
  padding: 10px 15px;
  border-radius: 5px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 5px 5px 15px rgba(0,0,0,.1);
}
.modal-box{
  top: 40%;
  opacity: 0;
  visibility: hidden;
  background: white;
  height: auto;
  width: 400px;
  padding: 30px;
  border-radius: 5px;
  border: 1px solid #50dcfb;
  box-shadow: 5px 5px 30px rgba(0,0,0,.2);
}
.start-btn.show-modal{
  opacity: 0;
  visibility: hidden;
}
.modal-box.show-modal{
  top: 50%;
  opacity: 1;
  visibility: visible;
  transition: .4s;
}
.modal-box .fa-times{
  position: absolute;
  top: 0;
  right: 0;
  background: #48DBFB;
  height: 45px;
  width: 50px;
  line-height: 40px;
  color: white;
  font-size: 18px;
  border-radius: 0 5px 0 50px;
  padding-left: 13px;
  cursor: pointer;
}
.fa-times:hover{
  font-size: 22px;
}
.modal-box .icon1{
  font-size: 60px;
  background: #48DBFB;
  height: 120px;
  width: 120px;
  color: white;
  border-radius: 50%;
  line-height: 120px;
  text-align: center;
  margin-bottom: 10px;
}
.modal-box header{
  font-size: 31px;
  font-family: 'Lobster Two';
  margin-bottom: 10px;
}
.modal-box p{
  /* margin-bottom: 10px; */
  line-height: 20px;
  color: grey;
}
form input, form button{
  height: 50px;
  width: 95%;
  border-radius: 3px;
}
form .icon2{
  position: absolute;
  height: 50px;
  width: 50px;
  margin-top: 15px;
  background: #48DBFB;
  color: white;
  line-height: 50px;
  font-size: 24px;
  border-radius: 5px 0 0 5px;
}
form input{
  margin-top: 15px;
  padding: 0 65px;
  font-size: 18px;
  outline: none;
  border: 2px solid #1ed2fa;
  caret-color: #48DBFB;
}
input::placeholder{
  color: #8c8c8c;
}
form input:focus{
  box-shadow: 0 0 15px #82e6fc,
              0 0 25px #b4f0fd,
              0 0 35px #ffffff;
}
form button{
  margin-top: 15px;
  background: #48DBFB;
  color: white;
  font-size: 25px;
  border: 1px solid #1ed2fa;
  letter-spacing: 1px;
  cursor: pointer;
  outline: none;
  transition: .3s;
}
form button:hover{
  background: #1ed2fa;
  border: 1px solid #05cdfa;
  letter-spacing: 2px;
}
.modal-box .icons{
  margin-top: 25px;
}
.icons i{
  font-size: 22px;
  margin: 0 7px;
  color: #48DBFB;
  cursor: pointer;
}
.icons i:hover{
  transform: scale(1.1);
  color: #05cdfa;
}

That’s all, now you’ve successfully created a Popup Subscription Form using HTML CSS & Javascript. If your code not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

]]> https://www.codingnepalweb.com/popup-subscription-form-javascript/feed/ 5 Custom Modal Box using HTML CSS & JavaScript https://www.codingnepalweb.com/custom-modal-box-using-javascript/ https://www.codingnepalweb.com/custom-modal-box-using-javascript/#comments Tue, 28 Apr 2020 10:45:00 +0000 https://codingnepalweb.com/2020/04/28/custom-modal-box-using-html-css-javascript/ Custom Modal Box using HTML CSS and JavascriptHello readers, Today in this blog you’ll learn how to create a Dialog or Modal Box using HTML CSS & Javascript. Previously I have shared a Fixed Sidebar Social Media Share Widget using HTML & CSS, now it’s time to create a Modal Box using HTML CSS Javascript or JQuery.

 
Maybe you have seen many types of modal boxes on many websites, Some peoples describe this is as a Dialog box also. For example, when we log out from Facebook there a confirmation appears to are you sure, that’s called the dialog modal box.
 
As you can see in the image, this is a Dialog or Modal Box. In the image, there are some texts, icons, and one close button. The modal box appears on the button click which’s a function handled by jQuery. When you click on the show modal button the modal box will be shown from the right bottom side.

If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Custom Modal Box).

Video Tutorial of Dialog Box or Modal Box

 
I hope you understood the basic concepts and codes of this Modal Box. As you have seen in the video I used jQuery to show and hide the Modal Box. I think it will help beginners to understand the actual concepts behind creating a modal box.

If you like this program (Custom Modal Box) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Modal Box or Dialog Box [Source Codes]

To create this program (Custom Modal Box). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <!-- <title>Custom Modal Box | CodingNepal</title> -->
      <link rel="stylesheet" href="style.css">
      <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
      <div class="show-btn">
         <button>Show Modal</button>
      </div>
      <div class="modal">
         <div class="top-content">
            <div class="left-text">
               Modal Box
            </div>
            <span class="close-icon"><i class="fas fa-times"></i></span>
            <div class="fas fa-camera-retro"></div>
         </div>
         <div class="bottom-content">
            <div class="text">
               Custom Modal Box
            </div>
            <p>
               Create a simple modal box using html and css only.
            </p>
            <div class="close-btn">
               <button>Close Modal</button>
            </div>
         </div>
      </div>
      <script>
         $('.show-btn').click(function(){
           $('.modal').toggleClass("show");
           $('.show-btn').addClass("disabled");
         });
         $('.close-icon').click(function(){
           $('.modal').toggleClass("show");
           $('.show-btn').removeClass("disabled");
         });
         $('.close-btn').click(function(){
           $('.modal').toggleClass("show");
           $('.show-btn').removeClass("disabled");
         });
      </script>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
body{
  background: #f2f2f2;
  text-align: center;
  overflow: hidden;
}
.show-btn{
  position: absolute;
  top: 50%;
  left: 50%;
  user-select: none;
  transform: translate(-50%, -50%);
}
.show-btn.disabled{
  pointer-events: none;
}
.modal{
  position: absolute;
  right: 0;
  opacity: 0;
  bottom: -100%;
  width: 360px;
  transition: bottom 0.4s, opacity 0.4s;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.3);
}
.modal.show{
  bottom: 0;
  opacity: 1;
}
.modal .top-content{
  background: #34495e;
  width: 100%;
  padding: 0 0 30px 0;
}
.top-content .left-text{
  text-align: left;
  padding: 10px 15px;
  font-size: 18px;
  color: #f2f2f2;
  font-weight: 500;
  user-select: none;
}
.top-content .close-icon{
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 23px;
  color: silver;
  cursor: pointer;
}
.close-icon:hover{
  color: #b6b6b6;
}
.top-content .fa-camera-retro{
  font-size: 80px;
  color: #f2f2f2;
}
.modal .bottom-content{
  background: white;
  width: 100%;
  padding: 15px 20px;
}
.bottom-content .text{
  font-size: 28px;
  font-weight: 600;
  color: #34495e;
}
.bottom-content p{
  font-size: 18px;
  line-height: 27px;
  color: grey;
}
.bottom-content .close-btn{
  padding: 15px 0;
}
.show-btn button,
.close-btn button{
  padding: 9px 13px;
  background: #27ae60;
  border: none;
  outline: none;
  font-size: 18px;
  text-transform: uppercase;
  border-radius: 3px;
  color: #f2f2f2;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.show-btn button{
  padding: 12px 15px;
}
.show-btn button:hover,
.close-btn button:hover{
  background: #26a65b;
}

That’s all, now you’ve successfully created a Custom Modal Box using HTML CSS & JavaScript. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

]]> https://www.codingnepalweb.com/custom-modal-box-using-javascript/feed/ 3