Домой / Для сайта / Всплывающие модальные окна (popup) с помощью CSS и JS
Всплывающие модальные окна (popup) с помощью CSS и JS

Всплывающие модальные окна (popup) с помощью CSS и JS

Давайте рассмотрим создание модальных всплывающих окон, которые в народе еще называются 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);
});

});
Давайте рассмотрим создание модальных всплывающих окон, которые в народе еще называются popup-окна. О создании всплывающих (модальных) окон в WordPress, мы говорили в отдельном уроке. В данном примере модальные окна появляются при клике на кнопку (текст) и исчезают при нажатии в любую область мимо модального окна, или при клике на ключевое слово. Изменяя значения в скрипте fadeIn вы можете увеличить или уменьшить скорость открытия всплывающего модального окна, а fadeOut - увеличить или уменьшить скорость закрытия. Для работы необходимо обязательно подключить библиотеку jQuery. Посмотреть и скачать демо пример вы можете ниже. Если у вас есть вопросы, задавайте в комментариях. HTML &lt;div align=&quot;center&quot; class=&quot;fond&quot;&gt; &lt;div&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.03 ( 18 голосов )
100

8 комментариев

  1. Аватар
    Алексей

    Добрый день! Спасибо за урок, простой и эффектный.

    Подскажи, добр человек, какую библиотеку лучше использовать для создания модальных окон и подгрузки информации прямо в них (как на аяксе)? 🙂

    Чтобы попроще, да подключать не очень трудно… точнее, чтобы можно было использовать на ранних версиях jq (1.4). Буду очень благодарен! 🙂

  2. Аватар

    Добрый день! уже давно бьюсь над. казалось бы, простым вопросом.
    Все пишут, что нужна библиотека. И в то же время, что в WP уже есть…

    Так есть или надо? ))

    И куда конкретно вставлять JS в Вордпрессе? Чтобы это окошечко появилось?
    Когда вставляю код в текст, то ничего не работает. Значит, ни в текст…

    Подскажите. Во всёи интернете не могу найти ответ

  3. Аватар

    Приветствую,Александр.
    Возможно сделать, чтобы всплывающем окне отображалась форма обратной связи и появлялась автоматически после заданного времени проведения на сайте человека?

  4. Аватар

    Здравствуйте, проблема с прокруткой на модальном окне. Если контента больше то просто выходит за границы и не прокручивается

  5. Аватар

    Почему в заглавии статьи вы пишите JS когда на самом деле используете jQuery вот вы геи!!

Оставить комментарий

Ваш email не будет опубликован.

*