html 弹窗并虚化背景 背景虚化弹框效果

html>

webrx-title

.bg img{width:100%;margin:0;padding:0;display:block;}

.blur{-webkit-filter:blur(8px)}

.popus{width:400px;color:#000;;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);font-family:"微软雅黑";padding:20px 0px;font-weight:bold;background-color:rgba(255,255,255,0.6);border-radius:18px;text-align:center;padding:30px 0px;box-shadow:0px 0px 10px rgba(0,0,0,0.4);display:none}

.popus div{width:220px;margin:10px auto}

.popus div.btn{width:80px;padding:5px 10px;color:#000}

.left{float:left;border:1px solid #000}

.popus div.btn.right{float:right;color:#666}

$(document).ready(function() {

$(".bg").on('click',function(){

$(this).addClass("blur");

$(".popus").show();

})

$(".btn").on('click',function(){

$('.popus').hide();

$('.bg').removeClass('blur');

})

});

确定按钮关闭按钮

运行效果：