Скрипт YouTube и другой контент в модальном окне » Techno-Co — Всё для вебмастера, для создание сайтов с нуля. {title}

techno-co.ru
18 Мар 2015, 18:26

Модальное окно для вывода видео с YouTube и другой контент. Использует только jQuery, HTML и CSS. Сам крестик сделан на CSS. Если любите простоту то окошко должно Вам приглянуться.Модальное окно предназначено не только для видео

Установка скрипта

1) Вставляем в стили:

.pop-up {
        width: 500px;
        box-shadow: 0 0 0 1000px rgba(0,0,0,0.5);
        background: rgba(0,0,0,0.5);
        position: fixed;
        top: 50%;
        margin-top: 100%;
        left: 50%;
        margin-left: -250px;
        z-index: 9;
        color: #fff;
        display: none;
}

.popup-close {
        width: 50px;
        margin-right: -60px;
        opacity: 0.8;
        float: right;
        cursor: pointer;
}

.popup-l1, .popup-l2 {
        width: 6px;
        height: 50px;
        margin-top: -5px;
        margin-left: 22px;
        background: #fff;
}

.popup-l1 {
        float: left;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
}

.popup-l2 {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
}

.popup-close:hover {
        opacity: 1;
}

2) На страницу добавляем следующий код:


function open_popup(box, width, height, yt) {
        if(!$(box+' iframe').length && yt) {
                $(box).append('');
        }
        $(box+' .popup-close').html('');
        if(width) $(box).css({'width': width, 'margin-left': -(width/2)});
        if(height) $(box).css({'height': height, 'margin-top': -(height/2)});
        else $(box).css('margin-top', -($(box).height()/2));
        $(box).show();
}
function close_popup(box) {
        $(box).hide();
        $(box+' #yt').remove();
}

(Для работы скрипта требуется jQuery)

Использование:

Для открытия окна используется функция open_popup(). Эта функция принимает 4 параметра (можно указать только один): идентификатор блока, ширина блока, высота блока, идентификатор видео YouTubeПример использования модального окна с HTML кодом: