Türkiye Drone Ligi başlıyor

Artık Youtube’un da okulu var

Youtube Videolarını Arkadaşlarınızla Birlikte Canlı İzleyin!

28. Yılını Kutlayan WWW.’nin Yaratıcısından Ciddi Uyarı!

HTML & CSS ile Popup Pencere Yapımı

Hazır Site Bileşenleri 9 Aralık 2016
496 Görüntülenme

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ış.

İlginizi Çekebilir
CSS only Müzik Player Elementi

CSS only Müzik Player Elementi

17 Ocak 2017
544 Görüntülenme
Müzik Player | Audio Player

Müzik Player | Audio Player

17 Ocak 2017
450 Görüntülenme
Vimeo Player API Demo

Vimeo Player API Demo

17 Ocak 2017
451 Görüntülenme
Yuvarlak Müzik Player

Yuvarlak Müzik Player

17 Ocak 2017
486 Görüntülenme
HTML ve CSS ile Dropdown Buton Yapımı

HTML ve CSS ile Dropdown Buton Yapımı

30 Aralık 2016
374 Görüntülenme
Mause Üzerine Gelince Ipucu ( Tooltip ) Sistemi Yapımı

Mause Üzerine Gelince Ipucu ( Tooltip ) Sistemi Yapımı

24 Aralık 2016
410 Görüntülenme
JavaScript İlerleme Çubuğu ( Progress Bar ) Yapımı

JavaScript İlerleme Çubuğu ( Progress Bar ) Yapımı

18 Aralık 2016
539 Görüntülenme
Filtreli Arama Tablo Yapımı

Filtreli Arama Tablo Yapımı

16 Aralık 2016
461 Görüntülenme
Filtreli Arama Sistemi Yapımı

Filtreli Arama Sistemi Yapımı

11 Aralık 2016
509 Görüntülenme
Popup Resim Galeri Modülü Yapımı

Popup Resim Galeri Modülü Yapımı

10 Aralık 2016
559 Görüntülenme
Bunlar da var!
Yerli İHA İlk Atışını Yaptı [Video]

Yerli İHA İlk Atışını Yaptı [Video]

18 Aralık 2015
241 Görüntülenme
Havada Gerçekleşen Değiş Tokuş [Video]

Havada Gerçekleşen Değiş Tokuş [Video]

20 Aralık 2015
188 Görüntülenme