Home ยป How to Create a Popup in HTML, CSS and JavaScript

How to Create a Popup in HTML, CSS and JavaScript

How to Create a Popup in HTML, CSS  and JavaScript

Hello, my friends in this video we will create an interactive and animated popup or modal without installing any third-party library, plugins or script just with HTML, CSS and JavaScript.

I hope this video helps you to clear your javascript concept and gather some tricks and tips from the video.

How to Create a Popup in HTML, CSS and JavaScript Part One Video

How to Create a Popup in HTML, CSS and JavaScript Part Two Video

Source Code:

Basic HTML Structure:

<!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>CSS Keyboard</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- HTML code goes here -->
    <script src="app.js"></script>
</body>
</html>

HTML Code For Popup/Modal Structure:

<button class="button" onclick="open_modal('#modal_one')">
      Open Modal
    </button>
    <div class="modal_wraper lg active" id="modal_one">
      <div class="modal_container">
        <div class="modal_header">
          Modal One Header
          <button class="close">
            <i class="ion-close-round"></i>
          </button>
        </div>
        <div class="modal_body">
          <h3>What is Lorem Ipsum?</h3>
          <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting
            industry. Lorem Ipsum has been the industry's standard dummy text
            ever since the 1500s, when an unknown printer took a galley of type
            and scrambled it to make a type specimen book. It has survived not
            only five centuries, but also the leap into electronic typesetting,
            remaining essentially unchanged. It was popularised in the 1960s
            with the release of Letraset sheets containing Lorem Ipsum passages,
            and more recently with desktop publishing software like Aldus
            PageMaker including versions of Lorem Ipsum.
          </p>
        </div>
        <div class="modal_footer">
          Modal Footer
          <button class="close btn">Close</button>
        </div>
      </div>
    </div>

CSS Code For Popup/Modal:

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  display: grid;
  place-items: center;
  min-height: 100vh;
}

.button {
  background-color: #4caf50;
  border: none;
  padding: 8px 15px;
  color: #fff;
  font-size: 16px;
  border-radius: 4px;
  box-shadow: 0 2px 10px #0003;
  outline: none;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

.button:hover {
  filter: brightness(0.95);
  box-shadow: 0 2px 15px #0006;
}
/* modal start */
.modal_wraper {
  background-color: #0005;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999;
  display: grid;
  place-items: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  transition: 0.3s ease-in-out;
}
.modal_wraper.active {
  opacity: 1;
  visibility: visible;
}
.modal_wraper .modal_container {
  background-color: #fff;
  max-width: 450px;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  display: none;
  box-shadow: 0 1px 6px #0001, 0 2px 10px #0002;
}

.modal_wraper.active .modal_container {
  display: block;
  animation-name: modal_open_animation;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
  animation-delay: 0.4s;
}

@keyframes modal_open_animation {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.modal_wraper.modal_close_animation .modal_container {
  animation-name: modal_close_animation;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}

@keyframes modal_close_animation {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

.modal_wraper.lg .modal_container {
  max-width: 650px;
}

.modal_wraper.xl .modal_container {
  max-width: 850px;
}

.modal_wraper .modal_container :is(.modal_header, .modal_footer) {
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #000;
  font-weight: bold;
}

.modal_wraper .modal_container :is(.modal_header, .modal_footer) > .close {
  border: none;
  background-color: transparent;
  outline: none;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

.modal_wraper .modal_container :is(.modal_header, .modal_footer) > .close i {
  pointer-events: none;
}

.modal_wraper
  .modal_container
  :is(.modal_header, .modal_footer)
  > .close:hover {
  color: orangered;
}

.modal_wraper .modal_container .modal_footer > .close.btn {
  background-color: orangered;
  color: #fff;
  padding: 8px 15px;
  border-radius: 4px;
  box-shadow: 0 2px 10px #0003;
}
.modal_wraper .modal_container .modal_footer > .close.btn:hover {
  filter: brightness(0.95);
  box-shadow: 0 2px 15px #0006;
}

.modal_wraper .modal_container .modal_body {
  border-top: 1px solid #0002;
  border-bottom: 1px solid #0002;
  padding: 20px;
  max-height: 80vh;
  overflow-y: auto;
  line-height: 1.8;
}
/* modal end */

JavaScript Code For Popup/Modal:

/* this method for open modal start */
function open_modal(modal_selector){
    let modals = document.querySelectorAll(modal_selector);
    modals.forEach(function(modal)
    {
        modal.classList.add('active');
    });
}
/* this method for open modal end */


/* this method for close modal start */
window.addEventListener('click', function(e){
    let status = false,
        modal  = '';
    
    if(e.target.classList.contains('modal_wraper')){
        status = true;
        modal  = e.target;
    }

    if(e.target.classList.contains('close') && e.target.closest('.modal_header,.modal_footer')){
        status = true;
        modal  = e.target.closest('.modal_wraper.active');
    }


    if(status)
    {
        modal.classList.add("modal_close_animation");

        let modal_container = modal.querySelector('.modal_container');
        if(modal_container)
        {
            modal_container.addEventListener('animationend', function(e){
                if(e.animationName == 'modal_close_animation')
                {
                    modal.classList.remove('modal_close_animation');
                    modal.classList.remove('active');
                }
            });
        }
    }
    
});
/* this method for close modal end */

Live Preview In Codepen:

Thank you for visiting my website, and to get this type of content please subscribe to my youtube channel.

More Article/Source Code:

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x