Давайте рассмотрим создание модальных всплывающих окон, которые в народе еще называются popup-окна.
О создании всплывающих (модальных) окон в WordPress, мы говорили в отдельном уроке.
В данном примере модальные окна появляются при клике на кнопку (текст) и исчезают при нажатии в любую область мимо модального окна, или при клике на ключевое слово.
Изменяя значения в скрипте fadeIn вы можете увеличить или уменьшить скорость открытия всплывающего модального окна, а fadeOut — увеличить или уменьшить скорость закрытия.
Для работы необходимо обязательно подключить библиотеку jQuery.
Посмотреть и скачать демо пример вы можете ниже.
Если у вас есть вопросы, задавайте в комментариях.
Демо СкачатьHTML
<div align="center" class="fond"> <div id="myfond_gris" opendiv=""></div> <div align="center" style="padding-top:35px;"> <div style="background-color:#00a096;" iddiv="box_1" class="mymagicoverbox"> Нажми на меня ! </div> <div style="background-color:#cb2025;" iddiv="box_2" class="mymagicoverbox"> И на меня тоже... </div> </div> <div id="box_1" class="mymagicoverbox_fenetre" style="left:-225px; width:450px;"> Заглавие первого модального окна! <div class="mymagicoverbox_fenetreinterieur" style="height:150px; "> <div align="center"> <br>Ты действительно любишь васаби? <br><br> <div style="width:100px" align="center" class="mymagicoverbox_fermer">НЕТ</div> </div> </div> </div> <link href='http://fonts.googleapis.com/css?family=Roboto:100,400,300,500,700' rel='stylesheet' type='text/css'> <div id="box_2" class="mymagicoverbox_fenetre" style="left:-225px; width:450px;"> Заглавие второго модального окна! <div class="mymagicoverbox_fenetreinterieur" style="height:150px; "> <div align="center"> <br>Небо синее? <br><br> <div style="width:100px" align="center" class="mymagicoverbox_fermer">ДА</div> </div> </div> </div> <div style="padding-top:35px;" align="center"> <div style=" color:#ffffff; font-weight:300; font-size:30px; font-family:'Roboto';padding-top:20px;"><font style="font-weight:400;">Wordpress-club.com</font></div> </div> </div>
CSS
.fond { position:absolute; padding-top:45px; top:0; left:0; right:0; bottom:0; background-color:#f8b334; } .mymagicoverbox { display:inline-block; color:#ffffff; padding:10px; margin:10px; cursor:pointer; font-weight:300; font-family:'Roboto'; } .mymagicoverbox_fenetre { z-index:9999; position:fixed; margin-left:50%; top:100px; text-align:center; display:none; padding:5px; background-color:#ffffff; color:#97BF0D; font-style:normal; font-size:20px; font-weight:300; font-family:'Roboto'; } .mymagicoverbox_fenetreinterieur { text-align:center; overflow:auto; padding:10px; background-color:#ffffff; color:#666666; font-weight:400; font-family:'Roboto'; font-size:17px; border-top:1px solid #e7e7e7; margin-top:10px } .mymagicoverbox_fermer { color:#CB2025; cursor:pointer; font-weight:400; font-size:14px; font-style:normal font-family:'Roboto'; } #myfond_gris { display: none; background-color:#000000; opacity:0.7; width:100%; height:100%; z-index:9998; position:fixed; top:0; bottom:0; right:0; left:0; }
JS
$(document).ready(function(){ $(".mymagicoverbox").click(function() { $('#myfond_gris').fadeIn(300); var iddiv = $(this).attr("iddiv"); $('#'+iddiv).fadeIn(300); $('#myfond_gris').attr('opendiv',iddiv); return false; }); $('#myfond_gris, .mymagicoverbox_fermer').click(function() { var iddiv = $("#myfond_gris").attr('opendiv'); $('#myfond_gris').fadeOut(300); $('#'+iddiv).fadeOut(300); }); });
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
Добрый день! Спасибо за урок, простой и эффектный.
Подскажи, добр человек, какую библиотеку лучше использовать для создания модальных окон и подгрузки информации прямо в них (как на аяксе)? 🙂
Чтобы попроще, да подключать не очень трудно… точнее, чтобы можно было использовать на ранних версиях jq (1.4). Буду очень благодарен! 🙂
День добрый!
К сожалению, у меня нет на заметке ничего толкового для такого случая.
Добрый день! уже давно бьюсь над. казалось бы, простым вопросом.
Все пишут, что нужна библиотека. И в то же время, что в WP уже есть…
Так есть или надо? ))
И куда конкретно вставлять JS в Вордпрессе? Чтобы это окошечко появилось?
Когда вставляю код в текст, то ничего не работает. Значит, ни в текст…
Подскажите. Во всёи интернете не могу найти ответ
Приветствую,Александр.
Возможно сделать, чтобы всплывающем окне отображалась форма обратной связи и появлялась автоматически после заданного времени проведения на сайте человека?
Здравствуйте. Для этого рекомендую использовать уже готовый плагин, читайте детальнее тут.
Спасибо, Александр, сейчас ознакомлюсь.
Здравствуйте, проблема с прокруткой на модальном окне. Если контента больше то просто выходит за границы и не прокручивается
Почему в заглавии статьи вы пишите JS когда на самом деле используете jQuery вот вы геи!!