模态背后的模糊有些麻烦

时间：2019-03-28 00:14:21

标签： jquery css focus jquery-animate css-animations

操作应如下：
当您单击图片时，将打开一个模态窗口，同时，背景的背面变暗或模糊。就我而言，整个窗口无一例外都在变化。 

//first Section Animate//
$(window).scroll(function() {
    var scroll = $(window).scrollTop();
      $(".first-section").css({
          transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/6)/100+')',
         
      });
      $(".first-section-btn").css({
        transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/6)/100+')',
       
    });
  });
  
  $(document).ready(function () {
      var img = $('.first-section');
      var btn = $('.first-section-btn');
      $(window).scroll(function(){
          if ($(window).scrollTop() > 500) {
              img.fadeOut();
              btn.fadeOut();
          } else {
              img.fadeIn();
              btn.fadeIn();
          }
      });
  });
//first Section Animate//


//Second Section Animate//
$(window).scroll(function() {
    var scroll = $(window).scrollTop();
      $(".second-section").css({
          transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/6)/100+')',
         
      });
      $(".second-section-btn").css({
        transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/6)/100+')',
        
    });
  });
  
  $(document).ready(function () {
      var img = $('.second-section');
      var btn = $('.second-section-btn');
      $(window).scroll(function(){
          if ($(window).scrollTop() > 1200) {
              img.fadeOut();
              btn.fadeOut();
          } else {
              img.fadeIn();
              btn.fadeIn();
          }
      });
  });
//Second Section Animate//


//Third Section Animate//
$(window).scroll(function() {
    var scroll = $(window).scrollTop();
      $(".third-section").css({
          transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/6)/100+')',
          
      });
      $(".third-section-btn").css({
        transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/6)/100+')',
       
    });
  });
  
  $(document).ready(function () {
      var img = $('.third-section');
      var btn = $('.third-section-btn');
      $(window).scroll(function(){
          if ($(window).scrollTop() > 2000) {
              img.fadeOut();
              btn.fadeOut();
          } else {
              img.fadeIn();
              btn.fadeIn();
          }
      });
  });
//Third Section Animate//


//Fourth Section Animate//
$(window).scroll(function() {
    var scroll = $(window).scrollTop();
      $(".fourth-section").css({
          transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/6)/100+')',
         
      });
      $(".fourth-section-btn").css({
        transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/6)/100+')',
       
    });
  });
  
  $(document).ready(function () {
      var img = $('.fourth-section');
      var btn = $('.fourth-section-btn');
      $(window).scroll(function(){
          if ($(window).scrollTop() > 2800) {
              img.fadeOut();
              btn.fadeOut();
          } else {
              img.fadeIn();
              btn.fadeIn();
          }
      });
  });
//Fourth Section Animate//


//Fifth Section Animate//
$(window).scroll(function() {
    var scroll = $(window).scrollTop();
      $(".fifth-section").css({
          transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/6)/100+')',
          
      });
      $(".fifth-section-btn").css({
        transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/6)/100+')',
        
    });
  });
  
  $(document).ready(function () {
      var img = $('.fifth-section');
      var btn = $('.fifth-section-btn');
      $(window).scroll(function(){
          if ($(window).scrollTop() > 3600) {
              img.fadeOut();
              btn.fadeOut();
          } else {
              img.fadeIn();
              btn.fadeIn();
          }
      });
  });
//Fifth Section Animate//



$(document).ready(function () {
    $('.first-block').click(function() {
        $('#first-block-active').focus();
            $('html').css('filter', 'blur(4px)');
    });
});
body{
height: 4000px;
}

#first-block img{
    z-index: 24;
    height: 280px;
    width: 400px;
    cursor: pointer;
    position: fixed;
    max-width: calc(100% - 120px);
    
    top: 35%;
    left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    
}
#first-block a{
    z-index: 25;
    position: fixed;
    top: 48%;
    left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
}
#second-block img{
    z-index: 22;
    height: 220px;
    width: 340px;
    cursor: pointer;
    position: fixed;
    top: 39%;
    left: 55%;
    max-width: calc(100% - 160px);
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    -webkit-box-shadow: 0 15px 32px 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 15px 32px 5px rgba(0,0,0,0.5);
    box-shadow: 0 15px 32px 5px rgba(0,0,0,0.5);
}
#second-block a{
    z-index: 23;
    position: fixed;
    top: 48%;
    left: 55%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
}

#third-block img{
    z-index: 20;
    height: 150px;
    width: 260px;
    cursor: pointer;
    position: fixed;
    top: 41%;
    left: 45%;
    max-width: calc(100% - 200px);
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
}
#third-block a{
    z-index: 21;
    position: fixed;
    top: 47%;
    left: 45%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    font-size: 10px;
    padding: 9px 12px;
}
#fourth-block img{
    z-index: 18;
    height: 120px;
    width: 240px;
    cursor: pointer;
    position: fixed;
    top: 44%;
    right: 28%;
    max-width: calc(100% - 240px);
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
}
#fourth-block a{
    z-index: 19;
    position: fixed;
    top: 47%;
    right: 35%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    font-size: 7px;
    padding: 7px 12px;
}
#fifth-block img{
    z-index: 16;
    height: 100px;
    width: 190px;
    cursor: pointer;
    position: fixed;
    top: 43%;
    right: 48%;
    max-width: calc(100% - 280px);
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    -webkit-box-shadow: 0 15px 32px 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 15px 32px 5px rgba(0,0,0,0.5);
    box-shadow: 0 15px 32px 5px rgba(0,0,0,0.5);
}
#fifth-block a{
    z-index: 17;
    position: fixed;
    top: 46%;
    right: 51%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    padding: 5px 7px;
    font-size: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" id="first-block">
      <div class="row">
        <div class="col-md-12">
          <a class="btn btn-dark first-section-btn">Кто Мы?</a>
          <img class="first-section z-depth-5" src="https://image.freepik.com/free-photo/portrait-cheerful-young-woman_23-2148066871.jpg" alt="First Section">
        </div>
      </div>
    </div>
    <div class="container" id="second-block">
      <div class="row">
        <div class="col-md-12">
          <a class="btn btn-outline-mdb-color second-section-btn font-weight-bold">Наши Преимущества</a>
          <img id="second-section z-depth-5" class="second-section" src="https://image.freepik.com/free-photo/amazed-girl-yellow-background_23-2148081691.jpg" alt="Second Section">
        </div>
      </div>
    </div>
    <div class="container" id="third-block">
      <div class="row">
        <div class="col-md-12">
          <a class="btn btn-outline-brown third-section-btn font-weight-bold">Наша Команда</a>
          <img class="third-section z-depth-5" src="https://image.freepik.com/free-photo/couple-walking-beach_23-2148111801.jpg" alt="Third Section">
        </div>
      </div>
    </div>
    <div class="container" id="fourth-block">
      <div class="row">
        <div class="col-md-12">
          <a class="btn btn-outline-mdb-color darken-4 fourth-section-btn font-weight-bold">Наши Цены</a>
          <img class="fourth-section z-depth-5" src="https://image.freepik.com/free-vector/blooming-roses-banner_53876-89188.jpg" alt="Fourth Section">
        </div>
      </div>
    </div>
    <div class="container" id="fifth-block">
      <div class="row" id="contact">
        <div class="col-md-12">
          <a class="btn btn-outline-light-blue fifth-section-btn font-weight-bold">Что? Где? Когда?</a>
          <img id="fifth-section z-depth-5" class="fifth-section" src="https://image.freepik.com/free-photo/beautiful-couple-spend-time-summer-park_1157-19676.jpg" alt="Fifth Section">
        </div>
      </div>
    </div>

1 个答案:

答案 0 :(得分：0)

您要在.first-block类上添加点击事件，而不是ID。因此，只需将其更改为#first-block即可。

请参见下面的代码段

//first Section Animate//
$(window).scroll(function() {
    var scroll = $(window).scrollTop();
      $(".first-section").css({
          transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/6)/100+')',
         
      });
      $(".first-section-btn").css({
        transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/6)/100+')',
       
    });
  });
  
  $(document).ready(function () {
      var img = $('.first-section');
      var btn = $('.first-section-btn');
      $(window).scroll(function(){
          if ($(window).scrollTop() > 500) {
              img.fadeOut();
              btn.fadeOut();
          } else {
              img.fadeIn();
              btn.fadeIn();
          }
      });
  });
//first Section Animate//


//Second Section Animate//
$(window).scroll(function() {
    var scroll = $(window).scrollTop();
      $(".second-section").css({
          transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/6)/100+')',
         
      });
      $(".second-section-btn").css({
        transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/6)/100+')',
        
    });
  });
  
  $(document).ready(function () {
      var img = $('.second-section');
      var btn = $('.second-section-btn');
      $(window).scroll(function(){
          if ($(window).scrollTop() > 1200) {
              img.fadeOut();
              btn.fadeOut();
          } else {
              img.fadeIn();
              btn.fadeIn();
          }
      });
  });
//Second Section Animate//


//Third Section Animate//
$(window).scroll(function() {
    var scroll = $(window).scrollTop();
      $(".third-section").css({
          transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/6)/100+')',
          
      });
      $(".third-section-btn").css({
        transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/6)/100+')',
       
    });
  });
  
  $(document).ready(function () {
      var img = $('.third-section');
      var btn = $('.third-section-btn');
      $(window).scroll(function(){
          if ($(window).scrollTop() > 2000) {
              img.fadeOut();
              btn.fadeOut();
          } else {
              img.fadeIn();
              btn.fadeIn();
          }
      });
  });
//Third Section Animate//


//Fourth Section Animate//
$(window).scroll(function() {
    var scroll = $(window).scrollTop();
      $(".fourth-section").css({
          transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/6)/100+')',
         
      });
      $(".fourth-section-btn").css({
        transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/6)/100+')',
       
    });
  });
  
  $(document).ready(function () {
      var img = $('.fourth-section');
      var btn = $('.fourth-section-btn');
      $(window).scroll(function(){
          if ($(window).scrollTop() > 2800) {
              img.fadeOut();
              btn.fadeOut();
          } else {
              img.fadeIn();
              btn.fadeIn();
          }
      });
  });
//Fourth Section Animate//


//Fifth Section Animate//
$(window).scroll(function() {
    var scroll = $(window).scrollTop();
      $(".fifth-section").css({
          transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/6)/100+')',
          
      });
      $(".fifth-section-btn").css({
        transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/6)/100+')',
        
    });
  });
  
  $(document).ready(function () {
      var img = $('.fifth-section');
      var btn = $('.fifth-section-btn');
      $(window).scroll(function(){
          if ($(window).scrollTop() > 3600) {
              img.fadeOut();
              btn.fadeOut();
          } else {
              img.fadeIn();
              btn.fadeIn();
          }
      });
  });
//Fifth Section Animate//



$(document).ready(function () {
    $('#first-block').click(function() {
        $('#first-block-active').focus();
            $('html').css('filter', 'blur(4px)');
    });
});
body{
height: 4000px;
}

#first-block img{
    z-index: 24;
    height: 280px;
    width: 400px;
    cursor: pointer;
    position: fixed;
    max-width: calc(100% - 120px);
    
    top: 35%;
    left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    
}
#first-block a{
    z-index: 25;
    position: fixed;
    top: 48%;
    left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
}
#second-block img{
    z-index: 22;
    height: 220px;
    width: 340px;
    cursor: pointer;
    position: fixed;
    top: 39%;
    left: 55%;
    max-width: calc(100% - 160px);
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    -webkit-box-shadow: 0 15px 32px 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 15px 32px 5px rgba(0,0,0,0.5);
    box-shadow: 0 15px 32px 5px rgba(0,0,0,0.5);
}
#second-block a{
    z-index: 23;
    position: fixed;
    top: 48%;
    left: 55%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
}

#third-block img{
    z-index: 20;
    height: 150px;
    width: 260px;
    cursor: pointer;
    position: fixed;
    top: 41%;
    left: 45%;
    max-width: calc(100% - 200px);
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
}
#third-block a{
    z-index: 21;
    position: fixed;
    top: 47%;
    left: 45%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    font-size: 10px;
    padding: 9px 12px;
}
#fourth-block img{
    z-index: 18;
    height: 120px;
    width: 240px;
    cursor: pointer;
    position: fixed;
    top: 44%;
    right: 28%;
    max-width: calc(100% - 240px);
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
}
#fourth-block a{
    z-index: 19;
    position: fixed;
    top: 47%;
    right: 35%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    font-size: 7px;
    padding: 7px 12px;
}
#fifth-block img{
    z-index: 16;
    height: 100px;
    width: 190px;
    cursor: pointer;
    position: fixed;
    top: 43%;
    right: 48%;
    max-width: calc(100% - 280px);
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    -webkit-box-shadow: 0 15px 32px 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 15px 32px 5px rgba(0,0,0,0.5);
    box-shadow: 0 15px 32px 5px rgba(0,0,0,0.5);
}
#fifth-block a{
    z-index: 17;
    position: fixed;
    top: 46%;
    right: 51%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    padding: 5px 7px;
    font-size: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" id="first-block">
      <div class="row">
        <div class="col-md-12">
          <a class="btn btn-dark first-section-btn">Кто Мы?</a>
          <img class="first-section z-depth-5" src="https://image.freepik.com/free-photo/portrait-cheerful-young-woman_23-2148066871.jpg" alt="First Section">
        </div>
      </div>
    </div>
    <div class="container" id="second-block">
      <div class="row">
        <div class="col-md-12">
          <a class="btn btn-outline-mdb-color second-section-btn font-weight-bold">Наши Преимущества</a>
          <img id="second-section z-depth-5" class="second-section" src="https://image.freepik.com/free-photo/amazed-girl-yellow-background_23-2148081691.jpg" alt="Second Section">
        </div>
      </div>
    </div>
    <div class="container" id="third-block">
      <div class="row">
        <div class="col-md-12">
          <a class="btn btn-outline-brown third-section-btn font-weight-bold">Наша Команда</a>
          <img class="third-section z-depth-5" src="https://image.freepik.com/free-photo/couple-walking-beach_23-2148111801.jpg" alt="Third Section">
        </div>
      </div>
    </div>
    <div class="container" id="fourth-block">
      <div class="row">
        <div class="col-md-12">
          <a class="btn btn-outline-mdb-color darken-4 fourth-section-btn font-weight-bold">Наши Цены</a>
          <img class="fourth-section z-depth-5" src="https://image.freepik.com/free-vector/blooming-roses-banner_53876-89188.jpg" alt="Fourth Section">
        </div>
      </div>
    </div>
    <div class="container" id="fifth-block">
      <div class="row" id="contact">
        <div class="col-md-12">
          <a class="btn btn-outline-light-blue fifth-section-btn font-weight-bold">Что? Где? Когда?</a>
          <img id="fifth-section z-depth-5" class="fifth-section" src="https://image.freepik.com/free-photo/beautiful-couple-spend-time-summer-park_1157-19676.jpg" alt="Fifth Section">
        </div>
      </div>
    </div>

相关问题
最新问题