Vivo X20 Plus 28 Ekim’de Satışa Sunulacak

Google, Play Store’da Uygulamları Anlık Test Butonu Entegre Ediyor

Çift SIM Samsung Galaxy Note8 ABD’de 800 Doların Altına Düştü

HTC U11 Android O güncellemesini Kasım Ayında Alacak

HTML & CSS ile Popup Pencere Yapımı

  • Hazır Site Bileşenleri
  • Savaş Dersim Çelik
  • Cuma Aralık 9th, 2016
  • 1.347 Görüntülenme
  • HTML, CSS, Javascript
  • Responsive

Web projelerinizde kullanabileceğiniz popup pencereye ihtiyacınız varsa bunu sıfırdan yazmak yerine aşağıda ki kodları kullanarak hızlı ve pratik bir şekilde oluşturabilirsiniz. Örnek kodlarımızda butona tıkladığı zaman popup pencere açılmaktadır sizi sistemi geliştirerek kendinize uyarlayabilirsiniz. Demo sayfaya konu altında ki butonu kullanarak ulaşabilirsiniz.

HTML Kodlarımız
<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>
</div>
CSS Kodlarımız
/* Popup (arka plan) */
.modal {
    display: none; /* Varsayılan olarak gizlidir */
    position: fixed; /* Yerinde kal */
    z-index: 1; /* Üstte */
    left: 0;
    top: 0;
    width: 100%; /* Ful Genişlik */
    height: 100%; /* Ful Yükseklik */
    overflow: auto; /* Gerekirse kaydırmayı etkinleştir */
    background-color: rgb(0,0,0); /* Yedek renk */
    background-color: rgba(0,0,0,0.4); /* Siyah w / opaklık */
}

/* İçerik / Kutu */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* % 15 üstten ve ortalanmış */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Ekran boyutuna bağlı olarak daha fazla veya daha az olabilir */
}

/* Kapat Düğmesi */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
JavaScript Kodlarımız
// Popup Al
var modal = document.getElementById('myModal');

// Kipi açan düğmeyi al
var btn = document.getElementById("myBtn");

// Kipi kapatan <span> öğesini edinin
var span = document.getElementsByClassName("close")[0];

// Kullanıcı düğmeyi tıklattığında
btn.onclick = function() {
    modal.style.display = "block";
}

// Kullanıcı <span> (x) düğmesini tıkladığında, popup
span.onclick = function() {
    modal.style.display = "none";
}

// Kullanıcı modelden başka herhangi bir yeri tıklattıysa, onu kapatın.
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

Yorumlar

Henüz hiç yorum yapılmamış.

Benzer İçerikler