Помощь js

upload · Dec 2, 2018

Всем привет ребят помогите пожалуйста активировать модульное окно через js
блин так как руки кривые не как не получается сделать чтобы при нажатие на кнопку открывалось модульное окошко

Кто разбирается в js помогите пожалуйста. А то блин с утра тупая башка не хера не варит....

Code:

<!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>

Code:

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

Code:

    $( 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;
  });
});

Dr.ZLo · Dec 3, 2018

Код срипан с другого сайта?

Это плагин Magnific Popup. Там есть подробная инструкция по установке и настройке.

ZeroCoolPro.Biz

Помощь js

upload
PRO Users

Dr.ZLo
Staff Member VIP Кинотрафик v2

Помощь с js

Помощь js

Помощь($$)

Помощь по дле

Помощь с js

Useful Searches

Помощь js

upload PRO Users

Dr.ZLo Staff Member VIP Кинотрафик v2

Помощь с js

Помощь js

Помощь($$)

Помощь по дле

Помощь с js

Useful Searches

Useful Searches

upload
PRO Users

Dr.ZLo
Staff Member VIP Кинотрафик v2