Всем привет ребят помогите пожалуйста активировать модульное окно через js
блин так как руки кривые не как не получается сделать чтобы при нажатие на кнопку открывалось модульное окошко
Кто разбирается в js помогите пожалуйста. А то блин с утра тупая башка не хера не варит....
блин так как руки кривые не как не получается сделать чтобы при нажатие на кнопку открывалось модульное окошко
Кто разбирается в js помогите пожалуйста. А то блин с утра тупая башка не хера не варит....
Код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ёпт</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ёпт -->
<a class="trigger-trailer" href="#">Клик ёпт</a>
<div class="mfp-bg mfp-ready"></div>
<div class="mfp-wrap mfp-close-btn-in mfp-auto-cursor mfp-ready" tabindex="-1" style="overflow: hidden auto;">
<div class="mfp-container mfp-ajax-holder mfp-s-ready">
<div class="mfp-content">
<div class="trailer-block" data-link="{full-link}">
<div class="trailer-title">{title}</div>
<div class="trailer-poster">
<div class="trailer-poster-play">
<nav><i class="fa fa-play"></i></nav>
</div>
<img src="[xfvalue_poster]" alt="{title}">
</div>
<div class="trailer-video">
<div id="trailer-video-embed">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Q3TTL6xtCZQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<button title="Close (Esc)" type="button" class="mfp-close">×</button></div></div>
<div class="mfp-preloader">Loading...</div>
</div>
</div>
<script type="text/javascript">
$( document ).ready(function() {
$('.trigger-trailer').on('click', function() {
$('.mfp-wrap mfp-close-btn-in mfp-auto-cursor mfp-ready').toggleClass('open');
$('.trigger-trailer').toggleClass('blur-it');
return false;
});
});
</script>
</body>
</html>
Код:
.mfp-wrap {
z-index: 1043;
outline: 0!important;
-webkit-backface-visibility: hidden;
}
.mfp-bg, .mfp-container, .mfp-wrap {
height: 100%;
width: 100%;
}
.mfp-bg, .mfp-wrap {
position: fixed;
left: 0;
top: 0;
display: none;
}
.mfp-wrap {
z-index: 1043;
outline: 0!important;
-webkit-backface-visibility: hidden;
}
.mfp-bg, .mfp-container, .mfp-wrap {
height: 100%;
width: 100%;
}
.mfp-bg, .mfp-wrap {
position: fixed;
left: 0;
top: 0;
}
.mfp-bg, .mfp-container, .mfp-wrap {
height: 100%;
width: 100%;
}
.mfp-s-error .mfp-content, .mfp-s-ready .mfp-preloader {
display: none;
}
.mfp-preloader {
color: #CCC;
position: absolute;
top: 50%;
width: auto;
text-align: center;
margin-top: -.8em;
left: 8px;
right: 8px;
z-index: 1044;
}
.mfp-auto-cursor .mfp-content {
cursor: auto;
}
.mfp-ajax-holder .mfp-content, .mfp-inline-holder .mfp-content {
width: 100%;
cursor: auto;
}
.mfp-content {
position: relative;
max-width: 800px;
display: inline-block;
height: 380px;
}
.mfp-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 1045;
}
.trailer-block {
position: relative;
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
[data-link] {
cursor: pointer;
}
.trailer-title {
border-bottom: 1px solid #2c5c9a;
font-size: 24px;
font-weight: bold;
color: #2c5c9a;
padding-bottom: 10px;
padding-left: 10px;
}
.trailer-poster {
width: 30%;
display: inline-block;
position: relative;
height: 90%;
overflow: hidden;
}
.trailer-poster-play {
position: absolute;
width: 100%;
height: 100%;
background: #30415642;
transition: 0.4s ease-in-out;
}
.trailer-poster-play nav {
width: 100px;
height: 100px;
position: relative;
text-align: center;
margin: 0 auto;
background: #ffffffd9;
border-radius: 50%;
padding: 21px 32px;
top: 37%;
opacity: 0;
transition: 0.4s ease-in-out;
}
.trailer-poster-play nav i.fa.fa-play {
color: var(--default-color);
font-size: 60px;
vertical-align: middle;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-play:before {
content: "\f04b";
}
.trailer-video {
width: 70%;
display: inline-block;
position: relative;
float: right;
height: 89.5%;
}
div#trailer-video-embed {
height: 100%;
overflow: hidden;
}
Код:
$( document ).ready(function() {
$('.trigger-trailer').on('click', function() {
$('.mfp-wrap mfp-close-btn-in mfp-auto-cursor mfp-ready').toggleClass('open');
$('.trigger-trailer').toggleClass('blur-it');
return false;
});
});
Последнее редактирование:
