Модальное окно для видео YouTube и кода
 | |
Однозначно, что это модальное окно самое оригинальное в своем дизайн. Просто оно прозрачное и только большой крестик выключить в светлом тоне с ним идет. Если вы только выводите на просмотр, то отличное решение как это окно. Также нужно заметить, что есть стильное модальное окно, которое отлично подойдет под плеер.Но оно не только, чтоб просматривать, можно на его поставить от социального ресурса ответ, как многие делают, и вот вы хотите ответить и нажимаете и появляется реальный каркас, который не чем не перекреплен, по цивилизаций.  Но мы ту говорим о материале, но можно просто на нем написать, да будет очень оригинально, так как на сайте написано на прозрачном фоне, но возможно кому и пригодиться. В нашем случай используется только jQuery, HTML и CSS. Если вам нравится все простое, то здесь как раз так все сделано. Установка: CSS: Код .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; } В низ сайта ставим код, в котором и будем прописывать видео, а точнее код плеера. Код <script> function open_popup(box, width, height, yt) { if(!$(box+' iframe').length && yt) { $(box).append('<iframe width="760" height="415" src="https://www.youtube.com/embed/Wp9NZmOz1IE" frameborder="0" allowfullscreen></iframe>'); } $(box+' .popup-close').html('<div class="popup-l1"></div><div class="popup-l2"></div>'); 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(); } </script> Но и саму надпись, что вызывать будет Код <a href="#" onclick="open_popup('#box-2', 640, 360, 'IuQf4t0QWnE')">Смотреть</a> <div id="box-2" class="pop-up"><div class="popup-close" onclick="close_popup('#box-2')"></div></div> А вот этот вызов специально для HTML кода. Код <div id="box-1" class="pop-up"> <div class="popup-close" onclick="close_popup('#box-1')"></div> Здесь пишем и также устанавливаем изображение. </div> <a href="#" onclick="open_popup('#box-1')">Открыть</a> Вот такое простое модальное окно, которое не для каждого ресурса подойдет. А если есть портал прозрачный, но таких мало, то как раз можно для него делали, можно так сказать. Но на тестовом сайте проверил на этом дизайн шаблоне и скажу, очень красиво смотрится. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 7 | |
|
| |
