1. HTML Yapısı: Temel olarak bir buton ve gizli bir HTML öğesi kullanılır 1.

<button id="modalAc">Modali Aç</button>
<div id="modal" class="modal">
  ...
</div>
Kopyala

2. CSS Tasarımı: Modal pencerenin güzel görünmesi için CSS kodları eklenir 1.

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  ...
}
Kopyala

3. JavaScript Kontrolü: Modal pencerenin açılmasını ve kapanmasını kontrol etmek için JavaScript kullanılır 1.

document.addEventListener("DOMContentLoaded", function() {
  let modal = document.getElementById("modal");
  let acButon = document.getElementById("modalAc");
  ...
  acButon.addEventListener("click", function() {
    modal.style.display = "block";
  });
  ...
});
Kopyala