Вопросы Теги

Некоторая проблема с размытием позади модального

<html>
    <head>
        <title>HTML Document</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    </head>

    <body>
        <div id="hover-id">
            Hello World
        </div>

        <script>
            jQuery(document).ready(function($){
                $(document).on('mouseover', '#hover-id', function(){
                    $(this).css('color','yellowgreen');
                });

                $(document).on('mouseout', '#hover-id', function(){
                    $(this).css('color','black');
                });
            });
        </script>
    </body>
</html>
0
задан karel 28 March 2019 в 06:27
поделиться

1 ответ

Вы добавляете событие щелчка в классе .first-block вместо идентификатора. Так что просто измените его на #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>

0
ответ дан Nimit Shah 28 March 2019 в 06:27
поделиться
Другие вопросы по тегам:

Похожие вопросы: