23-05-2018 23:53
My Wapmaster merupakan layanan online umpan web, yang terdiri dari tools atau alat pengelola untuk blogger, serta tutorial publikasi lain yang berbasis web.
Tips : Jika mendapati halaman blank ( blank Page ) silahkan gunakan halaman VERSI NORMAL Kami. tq

Efek zoom gambar kotak dialog

Dalam contoh ini, kita menggunakan CSS untuk membuat modal (kotak dialog) yang tersembunyi secara default. Kami juga menggunakan JavaScript untuk memicu modal dan untuk menampilkan gambar saat dalam modal ketika diklik. Perlu diketahui juga bahwa kita menggunakan nilai dari atribut "alt" gambar itu sebagai teks keterangan gambar dalam modal tersebut. ( w3schools.com )

klik gambar di bawah ini untuk melihat zoom kotak dialog

logo mywapmaster

<style>
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.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 */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.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)}
}

/* The Close Button */
.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;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}
</style>

<img id="myImg" src="logo-1.jpg" alt="logo mywapmaster" width="300" height="200">
<!-- popup Modal -->
<div id="myModal" class="modal">
  <span class="close">×</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>


<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
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;
    modalImg.alt = this.alt;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
    modal.style.display = "none";
}
</script>


Artikel menarik lainnya



Total Average Rating:
star star
2.3 Out Of 5
Total Votes: 383
Your Rating:

Copy Url

Shortlink

My Wapmaster
Rating 4 stars
Deskripsi "Free Online Tools And Generator"
Author
Keywords wapmaster, script, tools and generator, Css, Xtgem, Blog Mobile, Mywapblog

Sharing Is Caring


Join And Backlink

HomeChatbox
Wapmaster ServiceContact
PartnersBlog
Buku TamuPrivacy
main menu Buat Menu Sendiri Dan Dapatkan 350 Backlink Gratis Disini main menu

Info Pengunjung
Country United States
I.p54.166.172.180
Host ec2-54-166-172-180.compute-1.amazonaws.com
Layar
Kunjungan 1
BrowserCCBot/2.0

Social



android.png Adroid App

Berlangganan Via Email

Delivered by FeedBurner


Menu Cepat

Random Berita

Penyesalan Eks Napi Teroris Lakukan Teror di Indonesia
Kalahkan Korea, Indonesia Juara Grup B Piala Thomas
sang begal komentar xtgem itu bernama badwords
23 jenis list style pada Css, apa saja itu?
Rumus Menghitung Em Dan Px Dalam Css
Penghasilan di Bawah Nilai Ini, Keluarga Boleh Menerima Zakat

Back
Translate this page

XtGem Forum catalog