Затемнение всплывающих окон html

Как сделать всплывающее окно с затемнением и размытием с помощью css?

Есть кнопка по которой всплывает модальное окно. Как сделать так, чтобы на задний план за окном затемнялся и размыливался с помощью стилей?

.application < box-shadow: 0 0 10px #777; position: fixed; top: 50%; width: 100%; >.application .close

 Заказать звонок 
 
Перезвоним вам через 5 минут!
 X 
Заявка на выезд специалиста
;
 

2 ответа 2

Использовать подложку и filter: blur(2px); :

.application < box-shadow: 0 0 10px #777; position: fixed; top: 50%; width: 100%; >.application .close < cursor: pointer; position: absolute; top: 5px; right: 15px; >.container < position: relative; z-index: 10; background: #fff; padding: 1rem; >.application:before < content: ''; position: fixed; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; background: url(http://ultraimg.com/images/Ho6hQWs.jpg) center no-repeat; background-size: cover; filter: blur(2px); >.application:after

 Заказать звонок 
 
Перезвоним вам через 5 минут!
 X 
Заявка на выезд специалиста
;
 

да, спасибо, с затемнением хорошо, а вот с размытием есть нюанс: если нужно размытие заднего плана контента при прокрутке страницы, то вариант с уже background не подойдет..

спасибо, подходит последний вариант и как я понимаю — без скриптов не обойтись. пробую делать по образцу, но у меня почему-то фон с дорогой не затемняется.. codepen.io/anon/pen/qqNKEg

Вам нужен еще один блок overlay , который будет всплывать под окном, и вот с ним уже работать.

var overlay = document.getElementById('overlay'); function toggle(el)

.application < background: #fff; box-shadow: 0 0 10px #777; position: fixed; top: 50%; width: 100%; z-index: 11; >.application .close < cursor: pointer; position: absolute; top: 5px; right: 5px; >.overlay

 Заказать звонок 
 
Перезвоним вам через 5 минут!
 X 
Заявка на выезд специалиста
;
 
 

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.7.27.43548

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

Всплывающее окно с затемнением фона CSS

Модальные всплывающие окна используются веб мастерами и разработчиками довольно часто в сети интернет при создании сайта или блога. Некоторые из них часто используются для регистрации подписки на новостную рассылку, отображения уведомлений и предупреждений, а также для обработки форм регистрации и входа, как уже говорилось ранее. Также некоторые выставляют под красивое оформление для основного дизайн сайта.

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

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

Устанавливаем первое окно:

.button <
background: #428bca;
padding: 1em 2em;
color: #fff;
border: 0;
border-radius: 5px;
cursor: pointer;
>

.button:hover <
background: #3876ac;
>

.modal <
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
>

.modal-content <
margin: 10% auto;
width: 60%;
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
animation-name: modalopen;
animation-duration: var(—modal-duration);
>

.modal-header h2,
.modal-footer h3 <
margin: 0;
>

.modal-header <
background: var(—modal-color);
padding: 15px;
color: #fff;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
>

.modal-body <
padding: 10px 20px;
background: #fff;
>

.modal-footer <
background: var(—modal-color);
padding: 10px;
color: #fff;
text-align: center;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
>

.close <
color: #ccc;
float: right;
font-size: 30px;
color: #fff;
>

.close:hover,
.close:focus <
color: #000;
text-decoration: none;
cursor: pointer;
>

@keyframes modalopen <
from <
opacity: 0;
>
to <
opacity: 1;
>
>

// Get DOM Elements
const modal = document.querySelector(‘#my-modal’);
const modalBtn = document.querySelector(‘#modal-btn’);
const closeBtn = document.querySelector(‘.close’);

// Events
modalBtn.addEventListener(‘click’, openModal);
closeBtn.addEventListener(‘click’, closeModal);
window.addEventListener(‘click’, outsideClick);

// Open
function openModal() <
modal.style.display = ‘block’;
>

// Close
function closeModal() <
modal.style.display = ‘none’;
>

// Close If Outside Click
function outsideClick(e) <
if (e.target == modal) <
modal.style.display = ‘none’;
>
>

На этом весь установочный процесс:

Модальные коробки пользуются всеобщей популярностью, и теперь у вас есть четкая реализация, которую вы можете использовать сами. Где вероятно вам этот материал понадобиться для навигаций или больше для функциональности на сайте, где интересно найти интересные варианты его использования.

2. Установка на второе окно:

Открыть

Закрыть 
Всплывающие окна имеют широкий диапазон применений.
 
 

$(document).ready(function($) < // Клик по ссылке "Закрыть". $('.popup-close').click(function() < $(this).parents('.popup-fade').fadeOut(); return false; >); // Закрытие по клавише Esc. $(document).keydown(function(e) < if (e.keyCode === 27) < e.stopPropagation(); $('.popup-fade').fadeOut(); >>); // Клик по фону, но не по окну. $('.popup-fade').click(function(e) < if ($(e.target).closest('.popup').length == 0) < $(this).fadeOut(); >>); >);

Открыть popup 
Закрыть 
Всплывающие окна имеют широкий диапазон применений.