Помощь js

upload · 2 дек 2018

Всем привет ребят помогите пожалуйста активировать модульное окно через 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;
  });
});

Dr.ZLo · 3 дек 2018

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

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

ZeroCoolPro.Biz

Помощь js

upload
PRO Users

Dr.ZLo
Команда форума VIP Кинотрафик v2

Помощь с js

Помощь js

Помощь($$)

Помощь по дле

Помощь с js

Быстрый поиск

Помощь js

upload PRO Users

Dr.ZLo Команда форума VIP Кинотрафик v2

Помощь с js

Помощь js

Помощь($$)

Помощь по дле

Помощь с js

Быстрый поиск

Быстрый поиск

upload
PRO Users

Dr.ZLo
Команда форума VIP Кинотрафик v2