Popup Modal Box in HTML CSS & JavaScript

byAnonymous -January 07, 2022

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.

HTML CODE:

<!DOCTYPE html><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>

CSS CODE:

@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; }

Trending

BS Button Goups - Bootstarp Learn

The SQL COUNT, AVG And SUM - SQL Learn

SQL Index - SQL Learn

BS Glyphicons - Boostrap Learn

SQL Backup Database Statement - SQL Learn

Popup Modal Box in HTML CSS & JavaScript

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

You Might Like This:

Popup Modal Box [Source Code]

Contact Form