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

Resimleri Popup Pencerede Gösterme

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

Evet webinyo.com kullanıcıları daha önce html ve css kullanarak resimleri popup pencerede göstermek için gerekli kodları sizler ile paylaşmıştık. Bu konumuzda ise sitemizde bir resim galerisi olduğunu varsayalım bu resimlere tıklandığında popup olarak gösterebilmek için gerekli kodları sizler ile paylaşacağız. Gerekli kodlara ve demo’ya konu içerisinden ulaşabilirsiniz.

HTML Kodlarımız
<!-- Webinyo.COM -->
<!-- Popup Tetikle -->
<img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">

<!-- Popup -->
<div id="myModal" class="modal">

  <!-- Kapat Butonu -->
  <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>

  <!-- Popup İçerik ( Resim ) -->
  <img class="modal-content" id="img01">

  <!-- Popup Resim Yazısı -->
  <div id="caption"></div>
</div>
CSS Kodlarımız
/* Popupu Tetiklemek için Resim Style */
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* Popup ( Arkaplan ) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Popup İçerik (Resim) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Modal Resim Yazısı (Resim Metni) - Resim Olarak Aynı Genişlik */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Animasyon Ekleme - Popup Zoom */
.modal-content, #caption { 
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* Kapat Butonu */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Daha Küçük Ekranlarda% 100 Görüntü Genişliği */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

/* Webinyo.COM */
JavaScript Kodlarımız
/*
* Webinyo.COM
*/
// Popup Çağır
var modal = document.getElementById('myModal');

// Görüntüyü alın ve modal içine yerleştirin - "alt" metnini bir başlık olarak kullanın
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

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

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

webinyo-com-demo-resimleri-popup-pencerede-gosterme-html

Yorumlar

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

Benzer İçerikler