animated popup modal 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. Sat, 13 May 2023 17:49:29 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Create Popup Modal Box in HTML CSS & JavaScript https://www.codingnepalweb.com/create-popup-modal-box-in-html-css-javascript/ https://www.codingnepalweb.com/create-popup-modal-box-in-html-css-javascript/#respond Tue, 18 Oct 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4154 Create Popup Modal Box in HTML CSS & JavaScript

Hey buddy, I hope you are doing and creating mindblowing content. Today I have brought a beautiful and valuable project for you. Today you will learn to Create a Popup Modal Box in HTML CSS and JavaScript. As far as the modal box is concerned, if you want to create Popup Modal with Message Box HTML and CSS only click the given link. It is also called a dialog box.

A modal Box is the type of section which is displayed on the front of the webpage, and it contains information, warning, errors, and other things. Actually, it appears when the user did any action on the webpage. Similarly, content models can have different sizes and shapes.

Take a look at the given image of our project [ Popup Modal Box]. Basically, at the top, there is an icon of the tick, and below that tick, there is some text and underneath that text, there are two buttons. In fact, according to this project [ Popup Modal Box], the given modal box will appear after we click on the button which will be available before coming to this modal box. We can close this modal box simply by clicking on the close button or the outside of the modal box which will be in a little darker color.

To see the real demo of this project [Popup Modal Box]. How it appears, how we can close it, and all the animation I have added to this Modal Box you have to watch the video tutorial of this project, after watching the video tutorial of this project [ Popup Modal Box], you will also get the idea of HTML CSS and JavaScript code.

Create Popup Modal Box in HTML CSS & JavaScript | Video

Yeah, I have provided all the HTML CSS, and JavaScript code that I have used to create this project [ Popup Modal Box]. Before getting into the source code file, I would like to briefly explain the given video tutorial.

As you have seen in the video of this project [ Popup Modal Box]. At first, there was a button on the screen with the name “Open Modal”, When I clicked on that button the button disappeared and a modal box, as well as a little dark color overly behind the modal box, appeared. As you the modal box can be closed by clicking on the close button or just by clicking on the outside of the modal box. To make the UI design of this project [ Popup Modal Box], I just used HTML and CSS, and to open and close it, I used some JavaScript code.

I hope now you can create this project [ Popup Modal Box] easily. If you are feeling difficulty making this modal box. You can take all the HTML CSS and JavaScript code of this modal box from below.

You May Like This:

Popup Modal Box  [Source Codes]

To create a  Popup Modal Box using HTML CSS and JavaScript, follow the given steps line by line:
1. Create a folder. You can put any name in this folder and create the below-mentioned files inside this folder.
2. Create an index.html file. The file name must be index and its extension .HTML
3. Create a style.css file. The file name must be style and its extension .css
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source codes of this Border Loading Animation by clicking on the given download button.
First, paste the following codes into your index.html file

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Popup Modal Box</title>
    <!-- CSS -->
    <link rel="stylesheet" href="style.css" />
    <!-- Fontawesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"/>
  </head>
  <body>
    <section>
      <button class="show-modal">Show Modal</button>
      <span class="overlay"></span>

      <div class="modal-box">
        <i class="fa-regular fa-circle-check"></i>
        <h2>Completed</h2>
        <h3>You have sucessfully downloaded all the source code files.</h3>

        <div class="buttons">
          <button class="close-btn">Ok, Close</button>
          <button>Open File</button>
        </div>
      </div>
    </section>

    <script>
      const section = document.querySelector("section"),
        overlay = document.querySelector(".overlay"),
        showBtn = document.querySelector(".show-modal"),
        closeBtn = document.querySelector(".close-btn");

      showBtn.addEventListener("click", () => section.classList.add("active"));

      overlay.addEventListener("click", () =>
        section.classList.remove("active")
      );

      closeBtn.addEventListener("click", () =>
        section.classList.remove("active")
      );
    </script>
  </body>
</html>


/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
section {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #e3f2fd;
}
button {
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  padding: 14px 22px;
  border: none;
  background: #4070f4;
  border-radius: 6px;
  cursor: pointer;
}
button:hover {
  background-color: #265df2;
}
button.show-modal,
.modal-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
section.active .show-modal {
  display: none;
}
.overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
}
section.active .overlay {
  opacity: 1;
  pointer-events: auto;
}
.modal-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 380px;
  width: 100%;
  padding: 30px 20px;
  border-radius: 24px;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%) scale(1.2);
}
section.active .modal-box {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.modal-box i {
  font-size: 70px;
  color: #4070f4;
}
.modal-box h2 {
  margin-top: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #333;
}
.modal-box h3 {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  text-align: center;
}
.modal-box .buttons {
  margin-top: 25px;
}
.modal-box button {
  font-size: 14px;
  padding: 6px 12px;
  margin: 0 10px;
}

If you face any difficulties while creating your Modal Box or your code is not working as expected, you can download the source code files for this Modal Box for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

View Live Demo

 

]]> https://www.codingnepalweb.com/create-popup-modal-box-in-html-css-javascript/feed/ 0 Popup Modal Box in HTML CSS & JavaScript https://www.codingnepalweb.com/popup-modal-box-html-css-javascript/ https://www.codingnepalweb.com/popup-modal-box-html-css-javascript/#respond Fri, 07 Jan 2022 21:11:19 +0000 https://www.codingnepalweb.com/?p=4192 Popup Modal Box in HTML CSS & JavaScript

Hello reader, I hope you are doing very well. Today we will learn to create Animated Popup Modal Box using HTML CSS and JavaScript. As you know previously I have created a modal by using HTML and CSS that you guys liked so much and some of you have requested me to create a popup modal box using JavaScript. So now we are going to build that popup modal box with beautiful animations.

Popup Modal Box is the special design or template that pops up when the user clicks or hover on the buttons, menu, or text content to show the importance of informative content to the users.

Let’s have a look at the given image of our projects [Animated Popup Modal Box], there is one image of someones with a name and his profession, at the right corner side of that we can see on the close button. In the middle, we can see one message box and two buttons are at the bottom side. Actually, this is the popup ed version of our projects the first interface is hidden form.

Rather than theoretically, I would highly recommend you to watch the video tutorial of our program [Popup Modal Box in HTML CSS & JavaScript], by watching this video tutorial you will know the real demo of our popup modal box and got all the ideas about HTML CSS and JavaScript code that I have used to create this beautiful popup modal box template with beautiful animation.

Popup Modal Box in HTML CSS & JavaScript | Video Tutorial.

I have provided all the HTML CSS and JavaScript codes that I have used to create this popup modal box, before getting into the source code file, you need to know some important explanation of this video tutorial of the pop-up modal box.

As you have seen on the video tutorial, at first there is an image with name, profession and hire me button. When I clicked on the button our popup modal box is appears with beautiful scale-up animation. The UI design is made by using HTML CSS and to show and hide that popup box I have used a few lines of JavaScript. You can also hide and that popup by using HTML and CSS only.

If you are wondering to build this popup modal box by using HTML and CSS, I have already published that popup of modal with source code and you can go for it. Source code for this program, you will get below.

You Might Like This:

Popup Modal Box [Source Code]

To get the following HTML CSS and JavaScript code for an Popup Modal Box in HTML CSS & JavaScript. You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Popup Modal Box</title> 
    <link rel="stylesheet" href="style.css">
    <!-- Fontawesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>

    <!-- Boxicons CSS -->
    <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
      <section>
          <div class="profile">
              <div class="profile-img">
                  <!--<img src="profile.jpg" alt="">-->
              </div>
              <span class="name">Prem Shahi</span>
              <span class="profession">Web & App Designer</span>
              <div class="button">
                <i class='bx bxs-envelope'></i>
                <button>Hire Me</button>
              </div>
          </div>
          <div class="popup-outer">
              <div class="popup-box">
                <i id="close" class='bx bx-x close'></i>
                  <div class="profile-text">
                      <!--<img src="profile.jpg" alt="">-->
                      <div class="text">
                          <span class="name">Prem Shahi</span>
                          <span class="profession">Web & App Designer</span>
                      </div>
                  </div>
                  <textare placeholder="Enter your message"></textare>
                  <div class="button">
                      <button id="close" class="cancel">Cancel</button>
                      <button class="send">Send</button>
                  </div>
              </div>
          </div>
      </section>

    <script src="script.js"></script> 
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    overflow: hidden;
}
section{
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
section .profile{
    display: flex;
    flex-direction: column;
    align-items: center;
}
section.active .profile{
    display: none;
}
.profile .profile-img{
    background-color: #4070F4;
    padding: 2px;
    border-radius: 50%;
    height: 100px;
    width: 100px;
    margin-bottom: 10px;
}
.profile .profile-img img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    border: 3px solid #fff;
    border-radius: 50%;
}
.profile .name{
    font-size: 18px;
    font-weight: 500;
    color: #333;
}
.profile .profession{
    font-size: 18px;
    font-weight: 400;
    margin-top: -6px;
    color: #333;
}
.profile .button{
    display: flex;
    align-items: center;
    background: #4070f4;
    padding: 12px 20px;
    border-radius: 6px;
    margin-top: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
}
.profile .button:hover{
    background: #275df1;
}
.profile .button i{
    font-size: 18px;
    margin-right: 5px;
    color: #fff;
}
.profile .button button{
    background: none;
    display: inline-block;
    outline: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
}
/* pop up box styling */
section .popup-outer{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.3);
    position: absolute;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
    transform: scale(1.2);
    transition: opacity 0.2s 0s ease-in-out,  
                transform 0.2s 0s ease-in-out;
}
section.active .popup-outer{
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}
section .popup-box{
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    max-width: 380px;
    width: 100%;
}
.popup-box .close{
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 24px;
    color: #b4b4b4;
    transition: all 0.2s ease;
    cursor: pointer;
}
.popup-box .close:hover{
    color: #333;
}
.popup-box .profile-text{
    display: flex;
    margin-bottom: 20px;
    align-items: center;
}
.popup-box .profile-text .text{
    display: flex;
    flex-direction: column;
    margin-left: 15px;
}
.profile-text .text .name{
    font-size: 14px;
    font-weight: 400;
}
.profile-text .text .profession{
    font-size: 12px;
    font-weight: 500;
    margin-top: -4px;
}
 .popup-box img{
    height: 60px;
    width: 60px;
    object-fit: cover;
    border-radius: 50%;
}
.popup-box textarea{
    min-height: 140px;
    width: 100%;
    resize: none;
    outline: none;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    padding: 10px 10px 10px 14px;
    font-weight: 400;
    background: #f3f3f3;
}
.popup-box .button{
    display: flex;
    justify-content: flex-end;
}
.popup-box .button button{
    outline: none;
    border: none;
    margin-left: 10px;
    background: #6f93f6;
    padding: 6px 12px;
    border-radius: 4px;
    margin-top: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
}
.button button.cancel{
    background: #f082ac;
}
.button button.cancel:hover{
    background: #ec5f95;
}
.button button.send:hover{
    background: #275df1;
}

const section = document.querySelector("section"),
hireBtn = section.querySelector("#hireBtn"),
closeBtn = section.querySelectorAll("#close"),
textArea = section.querySelector("textarea");
 
hireBtn.addEventListener("click" , () =>{
  section.classList.add("show");
});

closeBtn.forEach(cBtn => {
  cBtn.addEventListener("click" , ()=>{
      section.classList.remove("show");
      textArea.value = "";
  });
});

If you face any difficulties while creating your Animated Popup Modal Box or your code is not working as expected, you can download the source code files for this Modal Box for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

]]> https://www.codingnepalweb.com/popup-modal-box-html-css-javascript/feed/ 0