Главная » Эффекты для сайта » Всплывающее модальное окно с помощью jQuery

Всплывающее модальное окно с помощью jQuery

2015-09-29 / Вр:23:37 / просмотров: 4054

Всем привет!
Я все еще в теме «Всплывающее модальное окно». Только в этот раз в коде будет использоваться библиотека jQuery.
Вам нужно всплывающее окно? В статье БЕСПЛАТНО даю абсолютно готовое решение. Заходите, копируйте и вставляйте на сайт.

Без всяких вступлений и лишней теории, приступим к делу.
Для того, чтобы всплывающее модальное окно отобразилось на сайте, добавьте перед тегом </body> вот такой код:

<div align="center" class="fond">
<div id="myfond_gris" opendiv=""></div>
<div align="center" style="background-color:#00a096;" iddiv="box_1" class="mymagicoverbox">
У меня вопрос
</div>
<div id="box_1" class="mymagicoverbox_fenetre" style="left:-225px; width:450px;">
Заглавие модального окна!
<div class="mymagicoverbox_fenetreinterieur" style="height:150px; ">
<div align="center">
Вам нравиться мой блог bloggood.top?
 Ответ:
<div style="width:100px" align="center" class="mymagicoverbox_fermer">Да!</div>
</div>
</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;
}

Далее подключаем библиотеку jquery:

<script src="https://code.jquery.com/jquery-1.11.1.js"></script>

И в самый низ перед тегом </body> вставляем вот такой код JS:

<script>
$(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);
});
});
</script>

Настройки:

строка №8 – изменяет значения в скрипте fadeIn для увеличения или уменьшения скорости открытия всплывающего модального окна;

строка №16 – изменяет значения в скрипте fadeOut для увеличения или уменьшения скорости закрытия всплывающего модального окна.

Абсолютно готовый код всплывающего модального окна:

<html>
<head>
  <title>модальное окно</title>
  <meta charset="utf-8">
<style>
.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;
}
</style>
</head>
<body>
<div align="center" class="fond">
<div id="myfond_gris" opendiv=""></div>
<div align="center" style="background-color:#00a096;" iddiv="box_1" class="mymagicoverbox">
У меня вопрос
</div>
<div id="box_1" class="mymagicoverbox_fenetre" style="left:-225px; width:450px;">
Заглавие модального окна!
<div class="mymagicoverbox_fenetreinterieur" style="height:150px; ">
<div align="center">
Вам нравиться мой блог bloggood.top?
 Ответ:
<div style="width:100px" align="center" class="mymagicoverbox_fermer">Да!</div> 
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(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);
}); 
});
</script>
</body>
</html>

Можете посмотреть демонстрацию.
[смотреть демонстрацию]