CSS ile Oluşturulmuş Takvim Şablonu
Önceki Makale
- Anasayfa
- Hazır Site Bileşenleri
- HTML & CSS ile Popup Pencere Yapımı
HTML & CSS ile Popup Pencere Yapımı

- Yazar: Savaş Dersim Çelik
- Kategori: Hazır Site Bileşenleri
- Tarih: Cuma Aralık 9th, 2016
- 15.219 Görüntülenme
- Beğenenler: 3 Like
- Yorum Yok Yorum Yap
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">×</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"; } }
-
-
Resimleri Popup Pencerede Gösterme Sonraki Makale
Konu İle İlgili Soru, Görüş ve Öneriler