HTML POP-UP Penceresi Eklemek?

09-03-2024, 18:04:25

HTML index kullanıyorum siteye girişte lightbox tarzı pop-up 1 adet tıklayınca farklı bir kısma yönlenen banner göstereceğim bir türlü yapamadım yardımcı olabilecek varsa benimle iletişime geçebilir mi

09-03-2024, 18:10:20

#2

nazimduran

Javascript kullanabilirsiniz hocam

09-03-2024, 18:13:54

#3

kuklux

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Popup Banner Reklamı</title>
  <link rel="stylesheet" href="styless.css">
</head>
<body>
<div class="modal-overlay"></div>
<div class="modal">
  <div class="modal-content">
    <span class="close-btn">&times;</span>
    <a href="gidilecekyer.com"><img src="https://cdn.r10.net/image.php?u=187936&avatartime=" alt=""></a>
  </div>
</div>
<script>document.addEventListener("DOMContentLoaded", function() {
    const modalOverlay = document.querySelector(".modal-overlay");
    const modal = document.querySelector(".modal");
    const closeButton = document.querySelector(".close-btn");
  
    modalOverlay.style.display = "flex";
    modal.style.display = "block";
  
    closeButton.addEventListener("click", function() {
      modalOverlay.style.display = "none";
      modal.style.display = "none";
    });
  
    modalOverlay.addEventListener("click", function(event) {
      if (event.target === modalOverlay) {
        modalOverlay.style.display = "none";
        modal.style.display = "none";
      }
    });
  });
  </script>
</body>
</html>

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
  }
  
  .modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    display: none;
  }
  
  .modal-content {
    text-align: center;
  }
  
  .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
  }

09-03-2024, 18:14:12

#4

c312

nazimduran adlı üyeden alıntı: mesajı görüntüle

Javascript kullanabilirsiniz hocam

evet o şekilde çözdüm artık opengpt sayesiinde