Javascript Modal Yapımı

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

  


× 
nocopyright video

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;
}