Самое просто адаптивное всплывающее окно, которое вы можете использовать для упрощения разработки.
<script>
$(document).ready(function(){
$('.closemodal').on('click',function(){
$('.modal').hide();
});
$('.openmodal').on('click',function(e){
e.preventDefault();
$('[data-modal='+$(this).data('mod')+']').css('display','flex');
});
});
</script>
Небольшой скрипт для кнопок открытия и закрытия окна на jQuery.
<a href="#" data-mod="success" class="openmodal btn">Заказать звонок</a>
Для создания кнопки, которая будет открывать нашу модалку используем класс openmodal. Параметр data-mod используем для указания имени конкретного модального окна
<div class="modal" style="display: none;" data-modal="success">
<div class="overlay closemodal"></div>
<div class="modal-content">
<div class="close closemodal">
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0.645264C5.373 0.645264 0 6.01827 0 12.6453C0 19.2723 5.373 24.6453 12 24.6453C18.627 24.6453 24 19.2723 24 12.6453C24 6.01827 18.627 0.645264 12 0.645264ZM17.3036 15.8271L15.1826 17.9481L11.9996 14.7666L8.81806 17.9481L6.69706 15.8271L9.87856 12.6456L6.69556 9.46413L8.81656 7.34313L11.9996 10.5246L15.1811 7.34313L17.3021 9.46413L14.1206 12.6456L17.3036 15.8271Z" fill="#A6A6A6"/>
</svg>
контент
</div>
</div>
Так выглядит код самого окна. Осталось только добавить стили.
.modal{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
}
.modal {
display: none;
}
.modal .close{
position:absolute;
right:-40px;
top:0;
padding: 5px;
cursor:pointer;
}
.modal .overlay{
position:absolute;
background: rgba(0, 0, 0, 0.69);
left:0;
top:0;
z-index:9;
width:100%;
height:100%;
}
.modal-content{
background:#fff;
position:relative;
z-index:10;
max-width:400px;
width:100%;
padding:15px;
margin:10px;
}
.modal .close svg {
fill: #fff;
}
Данное окно адаптивно. Используется svg элемент для закрытия окна (крестик), также оно закрывается, если кликнуть вне модалки. Пользуйтесь