Module «popup». Кастомизация magnific-popup. Свое API.

Демо:

https://codepen.io/ildar-meyker/pen/poZOomP

Плагины:

https://jquery.com/

https://dimsemenov.com/plugins/magnific-popup/

Подключение:

//
<link
	rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.css"
/>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/jquery.magnific-popup.min.js"></script>

Разметка:

<a href="#popup-call" class="js-popup-open" 
    >Открыть попап</a
>


<a
    href="http://www.youtube.com/watch?v=OZ2Nx4hBI6c"
    target="_blank"
    style="background-image: url(https://i.ytimg.com/vi/OZ2Nx4hBI6c/hq720.jpg)"
    class="js-popup-open"
    >Открыть видео
</a>

Стили:

// blocks/popup.scss
.popup {
    position: relative;
    padding: 40px;
    background: #fff;
    max-width: 600px;
    margin: 0 auto;

    .mfp-close {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #edf1f9;
        border-radius: 50%;
        top: 3.4rem;
        right: 4rem;
        width: calc(56 / 20) + em;
        height: calc(56 / 20) + em;
        background: #fff;
        opacity: 1;
        font-size: 2rem;
        color: #000;

        &:hover {
            border-color: darken(#edf1f9, 5%);
        }
    }
}

// vendor/fix-magnific-popup.scss

.mfp-move-horizontal {
    /* start state */
    .mfp-with-anim,
    .mfp-iframe-scaler {
        opacity: 0;
        transition: all 0.3s;
        transform: translateX(-50px);
    }

    &.mfp-bg {
        opacity: 0;
        transition: all 0.3s;
    }

    /* animate in */
    &.mfp-ready {
        .mfp-with-anim,
        .mfp-iframe-scaler {
            opacity: 1;
            transform: translateX(0);
        }
        &.mfp-bg {
            opacity: 0.8;
        }
    }

    /* animate out */
    &.mfp-removing {
        .mfp-with-anim,
        .mfp-iframe-scaler {
            transform: translateX(50px);
            opacity: 0;
        }
        &.mfp-bg {
            opacity: 0;
        }
    }
}

.mfp-bg {
    background: rgba(11, 26, 51, 0.5);
}

.mfp-container {
    padding: 0 2.4rem;
}

.mfp-preloader {
    width: 4rem;
    height: 4rem;
    background-color: #fff;
    opacity: 0.65;
    margin: 0 auto;
    animation: rotateplane 1.2s infinite ease-in-out;
    font-size: 0;
}

.mfp-iframe-scaler {
    overflow: visible;
}

.mfp-iframe-holder .mfp-close {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #edf1f9;
    border-radius: 50%;
    top: 0;
    right: -6.6rem;
    width: calc(56 / 20) + em;
    height: calc(56 / 20) + em;
    background: #fff;
    opacity: 1;
    font-size: 2rem;
    color: #000;
    padding: 0;

    &:hover {
        border-color: darken(#edf1f9, 5%);
    }
}

@media (max-width: 999.98px) {
    .mfp-iframe-holder .mfp-close {
        top: -6rem;
        right: -1.8rem;
        font-size: 1.4rem;
    }
}

@keyframes rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }
    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    }
    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}

Инициализация:

// defaults

$.extend(true, $.magnificPopup.defaults, {
    tClose: "", // Alt text on close button
    tLoading: "Загрузка...", // Text that is displayed during loading. Can contain %curr% and %total% keys
    gallery: {
        tPrev: "", // Alt text on left arrow
        tNext: "", // Alt text on right arrow
        tCounter: "%curr% из %total%", // Markup for "1 of 7" counter
    },
    image: {
        tError: 'Не удалось загрузить <a href="%url%">изображение</a>.', // Error message when image could not be loaded
    },
    ajax: {
        tError: 'Не удалось загрузить <a href="%url%">страницу</a>.', // Error message when ajax request failed
    },
});

// popup.js
const removalDelay = 500;
const mainClass = "mfp-move-horizontal";

function close() {
    $.magnificPopup.close();
}

function open(src, type) {
    $.magnificPopup.open({
        items: {
            src,
            closeBtnInside: true,
            type: type || "inline",
        },
        mainClass,
        removalDelay,
    });
}

function openById(src) {
    open(src);
}

function openVideo(src) {
    open(src, "iframe");
}

function handleCloseBtn(e) {
    e.preventDefault();

    close();
}

function handleOpenBtn(e) {
    e.preventDefault();

    const src = $(this).attr("href");
    const type = $(this).data("type");
    open(src, type);
}

$(function () {
    $(document).on("click", ".js-popup-open", handleOpenBtn);
    $(document).on("click", ".js-popup-close", handleCloseBtn);
});

export const Popup = {
    openVideo,

    openById,

    openSuccess() {
        open("#popup-success");
    },

    close,
};