Простейшее модальное окно на HTML, CSS, jQuery

Самое просто адаптивное всплывающее окно, которое вы можете использовать для упрощения разработки.

<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 элемент для закрытия окна (крестик), также оно закрывается, если кликнуть вне модалки. Пользуйтесь

Похожие статьи