JavaScript Custom Alert Popup Modal Box

Hey Friends today in this blog you'll learn how to create a Modal Box using HTML CSS and JavaScript. As I've shared earlier in my video on Popup Share Modal Box I showed you how to create a Modal Box with some icons and a copy text to clipboard JavaScript functionality. Now in this blog I want to be showing you how to make the Modal Box Popup using JavaScript, if you can remember in the video on Popup Share Modal Box we use checkbox to make the Modal Popup Now in this post I'll be teaching you how to make it Popup using JavaScript. If you already know the basic of JavaScript this project will be easy, in much easier terms what I mean is that if you know how to declare variables in JavaScript you're set to go but if you don't know how to declare variables in JavaScript I'll be teaching you here in this blog, so stay tuned.

JavaScript Custom Alert Popup Modal Box | Video Tutorial

Now in the video I know you've watched I explained everything detail by detail but still I'll be explaining it here in case you missed it, and that's where the source code comes in. Pls download the Code File to be able to create this

JavaScript Custom Alert Popup Modal Box | Source Code File

HTML CODE

<!DOCTYPE html>
<!-- Coding By Code Block youtube.com/c/CodeBlockYT -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Popup Modal Box using HTML CSS & JavaScript</title>
  <!-- Fontawesome CDN Link -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.0/css/all.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
      <div class="container">
        <div class="modalButton">
          <button id="ModalButton">View Modal</button>
        </div>
        <div class="modalBx" id="ModalBx">
          <i class="fa fa-exclamation"></i>
          <h4>Modal Popup Box Detected</h4>
          <span>We encountered an error while opening this file.<br>This could be because you don't have access to ths file,<br>if you think this is a mistake try refreshing this page</span>
          <br><br><a href="index.html">Refresh Page</a>
        </div>
      </div>
    </div>

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

</body>
</html>

CSS CODE

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
::selection{
  background: #e74c3c;
  color: #fff;
}
body{
  background: #007bff;
}
.wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.wrapper .container .modalBx{
  background: #fff;
  padding: 30px 30px 20px 20px;
  text-align: center;
  border-radius: 5px;
  box-shadow: 0 0 4px rgba(0,0,0,.4);
}
.wrapper .container .modalBx i{
  color: #e74c3c;
  width: 50px;
  height: 50px;
  border: 2px solid #e74c3c;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  font-size: 20px;
  margin-bottom: 20px;
}
.wrapper .container .modalBx h4{
  font-size: 20px;
  margin-bottom: 20px;
}
.wrapper .container .modalBx span{
  font-size: 17px;
  font-weight: 500;
}
.wrapper .container .modalBx a{
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  color: #fff;
  padding: 8px 20px;
  background: #e74c3c;
  border-radius: 20px;
}
.wrapper .container .modalBx{
  transform: scale(0);
  transition: all 0.2s ease;
}
.wrapper .container .modalBx.active{
  transform: scale(1);
}
.wrapper .container .modalButton{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.wrapper .container .modalButton button{
  width: 180px;
  height: 34px;
  outline: none;
  border: none;
  background: #fff;
  font-size: 16px;
  color: #007bff;
  border-radius: 5px;
  cursor: pointer;
}
.wrapper .container .modalButton button:hover{
  box-shadow: 0 0 4px rgba(0,0,0,.4);
}

JAVASCRIPT CODE

let ModalBx = document.getElementById("ModalBx");
let ModalButton = document.getElementById("ModalButton");

ModalButton.onclick = function() {
  ModalBx.classList.add("active");

  setTimeout(()=>{
    ModalBx.classList.remove("active");
  }, 5000);
}

DOWNLOAD CODE FILES

JavaScript Custom Alert Popup Modal Box

Creative Tutorials

Post a Comment

Post a Comment

Contact Form