CSS Popup 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 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