0

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

function toggle(el) {
  el.style.display = (el.style.display == 'none') ? '' : 'none'
}
.application {
  box-shadow: 0 0 10px #777;
  position: fixed;
  top: 50%;
  width: 100%;
}
.application .close {
  cursor: pointer;
  position: absolute;
  top: 5px;
  right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="order-call" onclick="toggle(hidden_content)">Заказать звонок</button>

<section class="application" id="hidden_content" style="display:none;">
  <div class="container">
    <h4>Перезвоним вам через 5 минут!</h4>
    <a class="close" onclick="toggle(hidden_content)">X</a>
    <p>Заявка на выезд специалиста</p>;
  </div>
</section>

2 ответа 2

1

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

function toggle(el) {
  el.style.display = (el.style.display == 'none') ? '' : 'none'
}
.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 {
  content: '';
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="order-call" onclick="toggle(hidden_content)">Заказать звонок</button>

<section class="application" id="hidden_content" style="display:none;">
  <div class="container">
    <h4>Перезвоним вам через 5 минут!</h4>
    <a class="close" onclick="toggle(hidden_content)">X</a>
    <p>Заявка на выезд специалиста</p>;
  </div>
</section>

3
  • да, спасибо, с затемнением хорошо, а вот с размытием есть нюанс: если нужно размытие заднего плана контента при прокрутке страницы, то вариант с уже background не подойдет..
    – Вася
    14 ноя 2016 в 11:08
  • 1
  • спасибо, подходит последний вариант и как я понимаю - без скриптов не обойтись. пробую делать по образцу, но у меня почему-то фон с дорогой не затемняется.. codepen.io/anon/pen/qqNKEg
    – Вася
    15 ноя 2016 в 7:45
1

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

var overlay = document.getElementById('overlay');

function toggle(el) {
  el.style.display = (el.style.display == 'none') ? '' : 'none'
  overlay.style.display = (overlay.style.display == 'none') ? '' : 'none'
}
.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{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="order-call" onclick="toggle(hidden_content)">Заказать звонок</button>

<section class="application" id="hidden_content" style="display:none;">
  <div class="container">
    <h4>Перезвоним вам через 5 минут!</h4>
    <a class="close" onclick="toggle(hidden_content)">X</a>
    <p>Заявка на выезд специалиста</p>;
  </div>
</section>
<div class="overlay" id="overlay" style="display:none;"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.