В первой статье мы писали с вами скрипт всплывающего окна на PHP + jQuery + в архиве был файлик позволяющий сохранять данные в базу MySQL. В этом уроке я хочу немного дополнить наш исходный код и добавить всплывающую форму с видео блоком.
- Видео будем подгружать из YouTube.
- Окно с видео-блоком будет открываться и автовоспроизводится) что бы пользователь не делал лишних кликов и сразу смотрел видео.
- При закрытии окна, видео будет останавливаться и удалятся с блока.
Я не буду дублировать предыдущий урок, только выложу новые куски кода на сайте. А архив с исходниками и доработанными стилями вы как всегда сможете скачать по ссылке в конце статьи. Поехали:
//========================================================================== popup $(function() { //функция вызова всплывающего окна с видео-блоком $('#video_btn').on('click', function() { $('#popup_video').fadeIn(); //добавляем видео в блок с настройками автовоспроизведения $('#popup_video').append(''); $('#popup_video_block').append(''); q_width = $('#popup_video').outerWidth()/-2; q_height = $('#popup_video').outerHeight()/-2; $('#popup_video').css({ 'margin-left': q_width, 'margin-top': q_height }); $('body').append(''); $('#fade').css({'filter' : 'alpha(opacity=40)'}).fadeIn(); }); $('body').on('click', '#fade, #popup_video_close', function() { $('#fade , #popup').fadeOut(function() { $('#popup_video_block').empty(); $('#popup_video').fadeOut(); $('#popup_video_close').remove(); $('#fade').remove(); }); }); });
Ну а html код формы самый простой из двух блоков:
Видео блок
Надеюсь этот элегантный вариант всплывающего видео блока поможет в одном из ваших проектов. Спасибо за внимание. Скачать исходники всплывающее окно с видео Youtube
Eugene Москаленко
модальное окно у тебе г*вно используй magnific popup