Как сделать заблюренную оверлей модалку?

Question

[nosazus]

Пример тут - https://www.crowdfireapp.com
При нажатии на Sign In.
В ДевТулз что-то не найду.

Answer 1

[Алексей Скляров]

При нажатии Sign in для блока, в котором находится сам сайт (и это не body) применяется css свойство:
filter: blur(N px);

Comments

[nosazus]

Вижу к боди добавляется modal-open, но там нету блура. Больше ничего не вижу. Название элемента скажите?

[Алексей Скляров]

nosazus: я дал вам всю информацию, достаточно было сделать поиск по css файлу того, что я скинул и что мы видим: .modal-open .bottom-cta,.modal-open .container,.modal-open .slider-wrapper{-webkit-filter:blur(3px);-moz-filter:blur(3px);filter:blur(3px)}

[nosazus]

Алексей Скляров: я так и сделал, но я хочу это увидеть в разметке на живом примере этого сайта. Где это в ДевТулз?

[Алексей Скляров]

nosazus: Я же вам уже вообще все прислал, даже код. Нажали на кнопку, все заразмылось. Перешли в инспектор и выбираете любой див с классом .container

Answer 2

[Александр Степанов]

Легко и просто :)
1. Оборачиваешь всю страницу в div
2. Делаешь ему при клике на определенный элемент класс
3. Классу задаешь blur, z-index, position:relative
Ничего сложного :)
Пример, кстати, можно посмотреть на surskayariviera.ru

Answer 3

[Максим]

Вот сам пример : https://codepen.io/Geyan/full/JNqZgB/
Ключевой момент :

Пример кода

$("button").click(function(){
    $(".wrapper").addClass("blur");
	    $(".jq").show();
		    $(".modal").addClass("show-m");
		    $("ul").removeClass("show");
});

$(".jq").click(function(){
    $(".wrapper").removeClass("blur");
	    $(".jq").hide();
		    $(".modal").removeClass("show-m");
});

$(".modal-btn").click(function(){
    $("ul").toggleClass("show");
});

Но и надо не забывать о верной стилизации css :

Только с таким css

*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}
html,body{
padding:10px;
background-image:url();
background-size:100% 100%;
}
.clear,.clear:after,.clear:before{
content:"";
display:block;
clear:both;
}
header{
padding:0;
width:100%;
height:100px;
background:linear-gradient(#fefefe,#eee,#fefefe);
line-height:100px;
}
header .left{
width:20%;
height:100px;
line-height:100px;
position:relative;
float:left;
}
header img{
display:block;
max-width:100%;
height:30px;
}
.left p{
width:80%;
height:30px;
position:absolute;
top:0;bottom:0;
left:0; right:0;
margin:auto;
}
.right{
width:30%;
height:100px;
float:right;
}
.right button{
width:150px;
height:40px;
border:2px solid rgba(250,40,30,.9);
outline:none;
background:transparent;
color:rgba(250,40,30,.9);
font-size:20px;
cursor:pointer;
}
.center{
width:49%;
height:100px;
margin-left:20%;
position:relative;
}
.center ul{
line-height:30px;
position:absolute;
top:110px;
right:20px;
width:250px;
text-align:left;
background:rgb(255,255,255);
padding-top:20px;
border:1px solid #ccc;
display:none;
}
.center ul:after{
content:"";
display:block;
width:0;
height:0;
position:absolute;
top:0;
left:100%;
transform:translate(-60px,-40px);
border:20px solid transparent;
border-bottom:20px solid #ccc;
}

.center ul:before{
content:"";
display:block;
width:0;
height:0;
position:absolute;
top:0;
left:100%;
transform:translate(-59px,-37px);
border:19px solid transparent;
border-bottom:19px solid #fff;
z-index:100;
}

.center li{
padding:10px;
}
.center a{
font-size:20px;
}
.center li:hover{
background-color:rgba(250,40,30,.9);
}
.modal-btn{
font-style:normal;
}
.modal-btn:after{
content:"\2742";
font-size:30px;
color:blue;
position:absolute;
right:50px;
}
.modal-btn:before{
content:"v";
font-size:20px;
color:blue;
position:absolute;
right:35px;
transform:scaleY(.3)scaleX(1.5);
font-weight:900;
}

.modal-btn:hover ul{
display:block;
}
.wrapper.blur{
filter:blur(2px);
}
.modal{
width:400px;
height:300px;
background-color:#fff;
border:1px solid red;
margin:0 auto;
display:none;
}
.show-m{
display:block;
position:absolute;
top:0; left:0; right:0; bottom:0;
margin:auto;
z-index:100;
}
.jq{
position:fixed;
background:rgba(200,200,200,.0);
top:0;
left:0;
right:0;
bottom:0;
z-index:50;
display:none;
}