Yaklaşık 10.000.000.000 hücre ve (0.33) yaşında

video modal

Popup pencerelerinin yerini alan modal yapısını Javascript ile hazırladım. Html, Css ve javascript kullanılarak hazırlanmış örnek modal video için hazırlanmış ve dilediğiniz şekilde kendinize göre düzenleyebilirsiniz.

Örneği önizlemek için buraya tıklayınız.

HTML kodu

 video play 

 

Javascript kodu

jQuery(document).ready(function () {
console.log("modal is ready");
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
var myPlayer = document.getElementById("myVideo");

btn.onclick = function (event) {
modal.style.display = "block";
event.preventDefault();
myPlayer.play();
};

span.onclick = function (event) {
modal.style.display = "none";
myPlayer.pause();
};

window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
myPlayer.pause();
}
};
});

 

CSS kodu

#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
text-align: center;
}

#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: 0px; /* 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: 100%;
max-width: 900px;
height: 506px;
position: relative;
margin: auto;
padding-top: 100px
}

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

/* Add Animation - Zoom in the Modal */
.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: 35px;
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%;
left: 0;
margin-left: 0;
}
#myImg {
width: 100%;
}
}
body {
text-align: center;
}

Bu içeriğe ifade bırak!

  • 0
    Göz Kırpma
  • 0
    Beğenme
  • 0
    Üzgün
  • 0
    Kızgın
  • 0
    İnanılmaz
  • 0
    Beğenmemek
  • 0
    Hahaha
  • 0
    Alkış

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Popüler Başlıklar

Blog Hakkında

Tarih: 6 Şubat 2023, Pazartesi
Kategori: Javascript, CSS
Okunma Sayısı: 5574 okunma
Yazar: Yılmaz Çiftci

Popup pencerelerinin yerini alan modal yapısını Javascript ile hazırladım....

Yorum yap, tartışalım!

Benzer sonuçlara bakın:

header full height tam yukseklik 100vh 1

Header Full Height – Header Tam Yükseklik 100vh

Full Height tam yükseklik full ekran ayarı yapmak için işinize yarayacak...

css nedir

CSS Nedir? En Popüler 6 CSS Kütüphanesi

İngilizcesi “Cascading Style Sheets” olan...

flexbox

CSS Flexbox Yapısı

Giriş: Web tasarımı, kullanıcı deneyimini iyileştirmek ve farklı ekran...

css ikon setleri

CSS İkon Setleri: Web Tasarımına Görsel Zenginlik Katma

Web tasarımında, kullanıcı deneyimini geliştirmek ve sayfaları görsel...