模糊背景没有出现

Question

here

我需要模糊背景，弹出下面的模糊效果不起作用帮助我使用代码

$(document).ready(function() {
  var $box = $('.box');

  $('.closei').each(function() {
    var color = $(this).css('backgroundColor');
    var content = $(this).html();
    $(this).click(function() {
      $box.css('backgroundColor', color);
      $box.addClass('open');
      $box.find('p').html(content);
    });

    $('.close').click(function() {
      $box.removeClass('open');
      $box.css('backgroundColor', 'transparent');

    });

    $('body').toggleClass('overlay');
    $("#pop-toggle").click(function() {
      $(".popup").toggle();
      $('body').toggleClass('overlay');
    })
    $(".close").click(function() {
      $(".popup").toggle();
      $('body').toggleClass('overlay');
    });

  });


  $("#name").autocomplete({

    source: 'search.php',

    minLength: 1

  });
});

body {
  font-family: 'Open Sans Condensed', sans-serif;
}
/* CSS Code */

.popScroll {
  position: fixed;
  z-index: 10;
  top: 0;
  display: table;
  text-align: center;
  width: 100%;
  height: 100%;
}
.popup {
  z-index: 10;
  width: 450px;
  height: 180px;
  padding: 100px;
  position: relative;
  margin: 20px auto;
  display: block;
  text-align: center;
  -moz-background-clip: padding;
  -o-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  /* prevents bg color from leaking outside the border */
  background-color: #fff;
  /* layer fill content */
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .18);
  /* drop shadow */
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .18);
  /* drop shadow */
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, .18);
  /* drop shadow */
  box-shadow: 0 0 10px rgba(0, 0, 0, .18);
  /* drop shadow */
  -webkit-transform-origin: top center;
  -moz-transform-origin: top center;
  -o-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation: iconosani 1.2s forwards;
  animation: iconosani 1.2s forwards;
  -moz-animation: iconosani 1.2s forwards;
  -o-animation: iconosani 1.2s forwards;
}
@-webkit-keyframes iconosani {
  0% {
    -webkit-transform: perspective(800px) rotateX(-90deg);
    -moz-transform: perspective(800px) rotateX(-90deg);
    -o-transform: perspective(800px) rotateX(-90deg);
    opacity: 1;
  }
  40% {
    -webkit-transform: perspective(800px) rotateX(30deg);
    -moz-transform: perspective(800px) rotateX(30deg);
    -o-transform: perspective(800px) rotateX(30deg);
    opacity: 1;
  }
  70% {
    -webkit-transform: perspective(800px) rotateX(-10deg);
    -moz-transform: perspective(800px) rotateX(-10deg);
    -o-transform: perspective(800px) rotateX(-10deg);
  }
  100% {
    -webkit-transform: perspective(800px) rotateX(0deg);
    -moz-transform: perspective(800px) rotateX(0deg);
    -o-transform: perspective(800px) rotateX(0deg);
    opacity: 1;
  }
}
.popScroll h1 {
  height: 60px;
  position: relative;
  color: #fff;
  font: 25px/60px sans-serif;
  text-align: center;
  text-transform: uppercase;
  background: #3D79D0;
}
.popScroll form {
  margin: 10px auto;
}
.subscribe-widget .email-form {
  font-size: 13px;
  color: #999999;
  padding-left: 6px;
  width: 270px;
  border: 1px solid #e0e0e0;
  padding: 5px 0 5px 5px;
  line-height: 25px;
}
.subscribe-widget .button {
  background: #3D79D0;
  padding: 6px 15px;
  color: #fff;
  border: none;
  line-height: 25px;
  margin-left: 0;
  cursor: pointer;
}
input[type="submit"] {
  -webkit-appearance: button;
  -moz-appearance: button;
  -o-appearance: button;
  cursor: pointer;
}
.popScroll p {
  padding: 1px 5px;
  font-family: 'Open Sans';
  font-size: 17px;
  margin-bottom: 10px;
}
#option {
  position: relative;
}
.boxi {
  display: inline-block;
  width: 169px;
  line-height: 42px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  -o-transition: all 0.1s linear;
}
#home {
  background: #3D79D0;
}
#close {
  background: #D21111;
}
.popScroll em {
  width: 42px;
  display: inline-block;
  position: relative;
  margin: 0 -20px;
  line-height: 42px;
  background: #fff;
  color: #777;
  text-align: center;
  border-radius: 50px;
}
#home:hover {
  background: #1852C7;
}
#close:hover {
  background: #B30E0E;
}
body.overlay:after {
  content: '';
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 0;
  opacity: .8;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #000;
}
body.overlay {
  /* Prevents scrolling */
  overflow: hidden;
  max-height: 100%;
  max-width: 100%;
}
.ribbon {
  position: absolute;
  z-index: 100;
  width: 100px;
  height: 100px;
  overflow: hidden;
}
.ribbon.top-left {
  top: -2.6px;
  left: -5px;
}
.ribbon.top-left.ribbon-primary > small {
  *zoom: 1;
  filter: progid: DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF428BCA', endColorstr='#FF2A6496');
  background-image: -moz-linear-gradient(top, #428bca 0%, #2a6496 100%);
  background-image: -webkit-linear-gradient(top, #428bca 0%, #2a6496 100%);
  background-image: linear-gradient(to bottom, #428bca 0%, #2a6496 100%);
  position: absolute;
  display: block;
  width: 100%;
  padding: 8px 10px;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 65%;
  color: white;
  background-color: #428bca;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -moz-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
  top: 16px;
  left: -27px;
}
.ribbon.top-left.ribbon-primary > small:before,
.ribbon.top-left.ribbon-primary > small:after {
  position: absolute;
  content: " ";
}
.ribbon.top-left.ribbon-primary > small:before {
  left: 0;
}
.ribbon.top-left.ribbon-primary > small:after {
  right: 0;
}
.ribbon.top-left.ribbon-primary > small:before,
.ribbon.top-left.ribbon-primary > small:after {
  bottom: -3px;
  border-top: 3px solid #0e2132;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}
.banner {
  width: 300px;
  height: 250px;
  position: relative;
  margin: 10px auto;
  display: block;
  text-align: center;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  /* prevents bg color from leaking outside the border */
  background-color: #fff;
  /* layer fill content */
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .18);
  /* drop shadow */
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .18);
  /* drop shadow */
  box-shadow: 0 0 10px rgba(0, 0, 0, .18);
  /* drop shadow */
}
.adstext {
  margin-top: 20px;
  color: #000;
  position: relative;
}
@media screen and (max-width: 600px) {
  .popup {
    width: 370px;
    height: 480px;
  }
  .popScroll h1 {
    height: 40px;
    font: 18px/40px sans-serif;
  }
  .subscribe-widget .email-form {
    width: 210px;
  }
  .adstext {
    margin-top: 20px;
  }
}
@media screen and (max-width: 400px) {
  .popup {
    width: 350px;
    height: 480px;
  }
  .popScroll h1 {
    height: 40px;
    font: 18px/40px sans-serif;
  }
  .subscribe-widget .email-form {
    width: 210px;
  }
  .banner {
    margin: 10px auto;
  }
  .adstext {
    margin-top: 20px;
  }
}
input.email-form:active,
input.email-form:focus {
  -webkit-animation: fade 0.55s ease-in;
  -moz-animation: fade 0.55s ease-in;
  animation: fade 0.55s ease-in;
}
@-webkit-keyframes fade {
  0% {
    box-shadow: 0 0 0 0 transparent;
  }
  66% {
    box-shadow: 0 0 0 10px #3D79D0, 0 0 0 12px white;
  }
  100% {
    box-shadow: 0 0 0 20px transparent, 0 0 0 22px transparent;
  }
}
@-moz-keyframes fade {
  0% {
    box-shadow: 0 0 0 0 transparent;
  }
  66% {
    box-shadow: 0 0 0 10px #3D79D0, 0 0 0 12px white;
  }
  100% {
    box-shadow: 0 0 0 20px transparent, 0 0 0 22px transparent;
  }
}
@-o-keyframes fade {
  0% {
    box-shadow: 0 0 0 0 transparent;
  }
  66% {
    box-shadow: 0 0 0 10px #3D79D0, 0 0 0 12px white;
  }
  100% {
    box-shadow: 0 0 0 20px transparent, 0 0 0 22px transparent;
  }
}
@keyframes fade {
  0% {
    box-shadow: 0 0 0 0 transparent;
  }
  66% {
    box-shadow: 0 0 0 10px #3D79D0, 0 0 0 12px white;
  }
  100% {
    box-shadow: 0 0 0 20px transparent, 0 0 0 22px transparent;
  }
}
/* POPUP */

.box {
  display: table;
  top: 0;
  visibility: hidden;
  -webkit-transform: perspective(1200px) rotateY(180deg) scale(0.1);
  -ms-transform: perspective(1200px) rotateY(180deg) scale(0.1);
  -moz-transform: perspective(1200px) rotateY(180deg) scale(0.1);
  transform: perspective(1200px) rotateY(180deg) scale(0.1);
  top: 0;
  left: 0;
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 1s all;
}
.box p {
  display: table-cell;
  vertical-align: middle;
  font-size: 64px;
  color: #ffffff;
  text-align: center;
  margin: 0;
  opacity: 0;
  transition: .2s;
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.box p i {
  font-size: 128px;
  margin: 0 0 20px;
  display: block;
}
.box .close {
  display: block;
  cursor: pointer;
  border: 3px solid rgba(255, 255, 255, 1);
  border-radius: 50%;
  position: absolute;
  top: 50px;
  left: 50px;
  width: 50px;
  height: 50px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  transition: .2s;
  -webkit-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  transition-delay: 0.2s;
  opacity: 0;
}
.box .close:active {
  top: 51px;
}
.box .close::before {
  content: "";
  display: block;
  position: absolute;
  background-color: rgba(255, 255, 255, 1);
  width: 80%;
  height: 6%;
  left: 10%;
  top: 47%;
}
.box .close::after {
  content: "";
  display: block;
  position: absolute;
  background-color: rgba(255, 255, 255, 1);
  width: 6%;
  height: 80%;
  left: 47%;
  top: 10%;
}
.box.open {
  left: 0;
  top: 0;
  visibility: visible;
  opacity: 1;
  z-index: 999;
  -webkit-transform: perspective(1200px) rotateY(0deg) scale(1);
  -moz-transform: perspective(1200px) rotateY(0deg) scale(1);
  -ms-transform: perspective(1200px) rotateY(0deg) scale(1);
  transform: perspective(1200px) rotateY(0deg) scale(1);
  width: 100%;
  height: 100%;
}
.box.open .close,
.box.open p {
  opacity: 1;
}
#card {
  font-family: Georgia;
  background: #fff;
  width: 450px;
  height: 185px;
  margin: 200px auto;
  padding: 10px 25px 30px 25px;
  border: 1px solid white;
  -webkit-box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
  -o-box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
  -khtml-box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
  box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
  text-align: center;
}
#card spa {
  color: #dc152c;
  font-weight: normal;
  font-size: 48px;
  margin-bottom: 10px;
}
#card spa::first-letter {
  color: #194ff7;
}
#card spa b {
  color: #f1840b;
  font-weight: normal;
}
#card spa b + b {
  color: #194ff7;
}
#card spa b + b + b {
  color: #00940e;
}
.content {
  text-align: left;
  /* Pure CSS3 typing animation with steps() :
         http://lea.verou.me/2011/09/pure-css3-typing-animation-with-steps/ */
}
.content ul {
  padding: 0;
  margin: 5px;
  font: 16px Arial;
}
.content ul li {
  list-style: none;
}
.content ul li a {
  color: #12C;
}
.content ul li span {
  display: block;
  width: 100%;
  margin-bottom: 2px;
}
.content ul li span:nth-child(2) {
  margin-bottom: 10px;
}
.content ul li span:nth-child(2) a {
  color: #093;
  text-decoration: none;
}
.content ul li span:nth-child(3),
.content ul li span:nth-child(4) {
  font-size: 14px;
}
.content .text {
  border: 1px solid #7ec6fd;
  float: left;
  width: 100%;
  margin-bottom: 10px;
}
.content .text h2 {
  position: relative;
  float: left;
  font-size: 100%;
  font-weight: normal;
  padding: 0;
  margin: 5px 10px;
}
.content .text h2 span {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  background: white;
  /* same as background */
  border-left: 0.1em solid black;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/*****************
    Section 
    ******************/

section {
  height: 100%;
  text-align: center;
}
section h1 {
  padding-top: 17%;
  font-family: 'Vollkorn', serif;
  font-size: 48px;
}
section p {
  width: 500px;
  margin: -28px auto 32px;
  font-family: 'Muli', sans-serif;
  font-size: 18px;
  line-height: 1.35;
}

<script type="text/javascript">
  src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" >
</script>

<script type="text/javascript">
  src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" >
</script>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<script>

   <div class="w3-container w3-orange">
      <h1>W3.CSS Demo</h1>      
      <p>Resize this responsive page!</p>      
    </div>

    <div class="w3-row-padding">

    <div class="w3-third">
      <h2>London</h2>
      <p>London is the capital city of England.</p>
      <p>It is the most populous city in the United Kingdom,
      with a metropolitan area of over 13 million inhabitants.</p>
    </div>

    <div class="w3-third">
      <h2>Paris</h2>
      <p>Paris is the capital of France.</p> 
      <p>The Paris area is one of the largest population centers in Europe,
      with more than 12 million inhabitants.</p>
    </div>

    <div class="w3-third">
      <h2>Tokyo</h2>
      <p>Tokyo is the capital of Japan.</p>
      <p>It is the center of the Greater Tokyo Area,
      and the most populous metropolitan area in the world.</p>
    </div>

    </div>






    <div class="box">
    <span class="close"></span>
    <div class="content">

    <!-- Close Box Content -->


    </div>
    </div>
    </div>
    </div>
    <!-- end -->

    <!-- popup -->
    <div class="popScroll">
    <div class="popup">
    <span class="ribbon top-left ribbon-primary">
    <small>Hello!</small>
    </span> 
    <h1>Enter your city</h1>
      <div class="subscribe-widget">
    <!-- form -->
      <form method="post" action="aa.htm">
    <input type="text" name="name" placeholder="Type city name" id ="name" class="email-form" required>
    </form>
    <!-- end form-->
    </div>
    </div>

Answer 1

使用javascript和HTML5，您只能对图像产生模糊效果。不是整页。也许你可以制作一个页面截图并暂时存储它并全屏显示图像。让它变得模糊。通过这种方式，用户认为整个背景都是模糊的。这是我的想法，我不知道它是否有效。

祝你好运。