<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>webrx-title</title>

<meta name="keywords" content="关键字">

<meta name="description" content="简介">

<script src="js/jquery-3.1.1.min.js"></script>

<style>

    .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}

</style>

<script>

    $(document).ready(function() {

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

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

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

  })

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

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

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

  }) 

    });

</script>

</head>


<body>

    <div class="bg">

        <img src="images/295804.jpg">

    </div>

    <div class="popus">

        <div>

           <div class="left btn">确定按钮</div>

           <div class="right btn">关闭按钮</div>

        </div>

    </div>

</body>

</html>

运行效果: