Сколько раз мы все уже сталкивались с реализацией модальных окон в своих проектах? Тяжело вспомнить сайт на котором они не использовались. Не так давно нашёл отличный плагин, для реализации данного функционала.
На мой взгляд это лучшее решение, из всех что сейчас есть. Легко, красиво, быстро, просто — большего мне и не нужно было.
Для подключения вам потребуются 2 файла — remodal.min.js и remodal.css. Скачиваем их по ссылке в низу страницы, подключаем к нашему сайту. Далее указываем ссылку, по которой необходимо открыть окно:
|
|
<div class="remodal-bg remodal-is-closed"> <a href="#modal" class="btn" id="offer-news-btn" >Открыть окно</a> </div> |
И вставляем код окна куда нам нужно на страницу:
|
|
<div class="remodal" data-remodal-id="modal" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc"> <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button> <div class="get-product-popup"> <p id="modal1Title" class="">Remodal window</p> <p>Тут можете написать текст, который будет в окне</p> </div> </div> |
На моём сайте в модальное окно вставлена форма при помощи шорт кода и плагина Contact Form 7. Код у меня получился такой:
|
|
<div class="remodal" data-remodal-id="modal" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc"> <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button> <div class="get-product-popup"> <p id="modal1Title" class="">Remodal window</p> <?php echo do_shortcode('[contact-form-7 id="8" title="Обратная связь"]'); ?> </div> </div> |
Пример можете просмотреть нажав на кнопку «Предложить новость» в подвале сайта.
Ссылка на плагин: vodkabears
comments powered by HyperComments