MultiFlex-2 Web Site Tasarımı

Monkeys Web Site Tasarımı

Lazy Days Web Site Tasarımı

In a Pickle Web Site Tasarımı

HTML & CSS ile Popup Pencere Yapımı

Hazır Site Bileşenleri Cuma Aralık 9th, 2016
616 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

Salı Ocak 17th, 2017
1.624 Görüntülenme
Müzik Player | Audio Player

Müzik Player | Audio Player

Salı Ocak 17th, 2017
636 Görüntülenme
Vimeo Player API Demo

Vimeo Player API Demo

Salı Ocak 17th, 2017
1.365 Görüntülenme
Yuvarlak Müzik Player

Yuvarlak Müzik Player

Salı Ocak 17th, 2017
1.659 Görüntülenme
HTML ve CSS ile Dropdown Buton Yapımı

HTML ve CSS ile Dropdown Buton Yapımı

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

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

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

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

Pazar Aralık 18th, 2016
597 Görüntülenme
Filtreli Arama Tablo Yapımı

Filtreli Arama Tablo Yapımı

Cuma Aralık 16th, 2016
549 Görüntülenme
Filtreli Arama Sistemi Yapımı

Filtreli Arama Sistemi Yapımı

Pazar Aralık 11th, 2016
567 Görüntülenme
Popup Resim Galeri Modülü Yapımı

Popup Resim Galeri Modülü Yapımı

Cumartesi Aralık 10th, 2016
639 Görüntülenme
Bunlar da var!
Nobel Ödüllü Deneyleri Tekrar Yapın

Nobel Ödüllü Deneyleri Tekrar Yapın

Cuma Mayıs 20th, 2016
253 Görüntülenme
Spotify, TeliaSoneradan 115 milyon dolar yatırım aldı

Spotify, TeliaSoneradan 115 milyon dolar yatırım aldı

Çarşamba Haziran 10th, 2015
197 Görüntülenme
Marvel Heroes 2016 Bomba Gibi Geliyor!

Marvel Heroes 2016 Bomba Gibi Geliyor!

Pazartesi Şubat 1st, 2016
237 Görüntülenme
Su Üzerinde 125 Metre Yürüyen Adam

Su Üzerinde 125 Metre Yürüyen Adam

Pazar Eylül 6th, 2015
254 Görüntülenme
Xbox’ta Ayın Ücretsiz Oyunları

Xbox’ta Ayın Ücretsiz Oyunları

Cumartesi Ocak 30th, 2016
253 Görüntülenme
Skype web ilk olarak ABDde kullanıma açıldı

Skype web ilk olarak ABDde kullanıma açıldı

Pazartesi Haziran 8th, 2015
200 Görüntülenme