Давайте в этом материале подробно разберем, как можно самостоятельно создать модальное окно, которое идет как продолжение сайта. Палитра цвета может быть любой, так как к материалу закрепим стилистику, что отвечает за оформление, где по умолчанию идет в простой форме. А вот JavaScript здесь полностью отвечает за функционал, так что лишний раз не нужно его трогать, а все оставить по умолчанию.
Всплывающие окна являются наиболее полезным способом показать предупреждение или любую другую важную информацию, как форма входа для посетителей сайта во многих шаблонах любого тематического направление. В этом мануале узнаете, что не так сложно создать самостоятельно простое всплывающее окна с наложением теней и кнопкой закрытия. Мы собираемся реализовать это, используя HTML, CSS и jQuery.
Окно и прикрепленная тень скрываются при загрузке страницы, здесь изначально нужно вызвать его, и по клику появится окно с вашей информацией.
Подключим библиотеку:
Код
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
HTML
Это оборачивает фактическую коробку кнопкой закрытия, где вспомогательный интервал используется для центрирования коробки по вертикали.
Код
<a class="kesuesa_unaicoul_beproved">Вызвать по клику модальное окно</a>
<div class="sagesue_bagamk_idsamib">
<span class="helper"></span>
<div>
<div class="dsamibesugould">X</div>
<p>Здесь идет заголовок
Интересные решения для вебмастера в создание и продвижение сайтов,
используя HTML и CSS с оригинальным способом графического дизайна.</p>
</div>
</div>
CSS
Код
.sagesue_bagamk_idsamib{
background:rgba(0,0,0,.4);
cursor:pointer;
display:none;
height:100%;
position:fixed;
text-align:center;
top:0;
width:100%;
z-index:
}
.sagesue_bagamk_idsamib .helper{
display:inline-block;
height:100%;
vertical-align:middle;
}
.sagesue_bagamk_idsamib > div {
background-color: #fff;
box-shadow: 10px 10px 60px #555;
display: inline-block;
height: auto;
max-width: 551px;
min-height: 100px;
vertical-align: middle;
width: 60%;
position: relative;
border-radius: 8px;
padding: 15px 5%
}
.dsamibesugould {
background-color: #fff;
border: 3px solid #999;
border-radius: 50px;
cursor: pointer;
display: inline-block;
font-family: arial;
font-weight: bold;
position: absolute;
top: -20px;
right: -20px;
font-size: 25px;
line-height: 30px;
width: 30px;
height: 30px;
text-align: center;
}
.dsamibesugould:hover {
background-color: #ccc;
}
.kesuesa_unaicoul_beproved {
cursor: pointer;
font-size: 20px;
margin: 20px;
display: inline-block;
font-weight: bold;
}
JS
Код
$(window).load(function () {
$(".kesuesa_unaicoul_beproved").click(function(){
$('.sagesue_bagamk_idsamib').show();
});
$('.sagesue_bagamk_idsamib').click(function(){
$('.sagesue_bagamk_idsamib').hide();
});
$('.dsamibesugould').click(function(){
$('.sagesue_bagamk_idsamib').hide();
});
});
Так что его можно ставить на любой страницы, как уже сказано, это продолжение самого сайта, где размещается разная информация или скрипты для функциональности интернет сайта.
Демонстрация
