Posts

Modal Popup with HTML, CSS & JavaScript – By Ben Yok

Writer
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive Modal Popup by BEN YOK</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: rgb(92, 236, 188);
    }

    .btn-save-now {
      color: white;
      padding: 8px 15px;
      font-size: 20px;
      background-color: blue;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .modal {
      display: none;
      position: fixed;
      justify-content: center;
      align-items: center;
      background-color: rgb(235, 243, 224);
      padding: 15px;
      border-radius: 10px;
      z-index: 99999;
      top: 15%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .modal-close {
      font-size: 25px;
      font-weight: bold;
      color: red;
      float: right;
      cursor: pointer;
    }

    .modal-content {
      max-width: 100%;
    }

    .modal-header {
      font-weight: bold;
      font-size: 20px;
    }

    .modal-body p {
      font-size: 18px;
    }

    #btn-alert-div {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 10px;
    }

    .btn-alert-no,
    .btn-alert-yes {
      color: white;
      padding: 8px 15px;
      font-size: 17px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .btn-alert-no {
      background-color: black;
    }

    .btn-alert-yes {
      background-color: blue;
    }

    @media (max-width: 400px) {
      .modal {
        width: 90%;
      }
    }
  </style>
</head>
<body>

  <button class="btn-save-now" onclick="openModal()">SAVE NOW</button>

  <div id="myModal" class="modal">
    <div class="modal-content">
      <span class="modal-close" onclick="closeModal()">×</span>
      <div class="modal-header">Confirmation Alert!</div>
      <div class="modal-body">
        <hr>
        <p>Are you sure you want to save??</p>
        <hr>
        <div id="btn-alert-div">
          <button class="btn-alert-no">No</button>
          <button class="btn-alert-yes">Yes</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    function openModal() {
      document.getElementById("myModal").style.display = "flex";
    }

    function closeModal() {
      document.getElementById("myModal").style.display = "none";
    }

    window.onclick = function(event) {
      const modal = document.getElementById("myModal");
      if (event.target === modal) {
        closeModal();
      }
    }
  </script>

</body>
</html>

Post a Comment

create me a another balground colro ffor this only two like ads banner :
Ooooops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.