画面全体をハイライト表示してハイライト表示する方法は？

Question

私はこのメニューで強調表示されるようにしようとしていますが、この画像の場合と全く同じクリックイベントで画面全体が暗くなるはずです。image jqueryコードを記述しましたが、実行時にイベントをキャッチするだけですfadeToggleアクション

私はそれを正しく行う方法が非常に混乱しています。あなたはそんなに

$(document).ready(function() { 
 
    $("#button").click(function() { 
 
    $('.slide').fadeToggle(500); 
 
    }); 
 
});

/* Header */ 
 

 
#main_header { 
 
    opacity: 1; 
 
    width: 100%; 
 
    height: 50px; 
 
    background: #f0f0f0; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
#main_header .text_ru { 
 
    font-size: 15px; 
 
    color: rgb(12, 89, 163); 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    width: 18px; 
 
    height: 11px; 
 
    display: inline-block; 
 
    font-weight: 500; 
 
    margin-left: 20px; 
 
} 
 

 
p.text_ru { 
 
    line-height: 1.929; 
 
} 
 

 
#main_header .left_header { 
 
    float: left; 
 
} 
 

 
#main_header .right_header { 
 
    float: right; 
 
    padding: 15px 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header id="main_menu"> 
 
    <div id="menu"> 
 
    <ul class="slide"> 
 
     <li><a href="#">Поиск строения</a></li> 
 
     <li><a href="#">Оплатить ком услуги</a></li> 
 
     <li><a href=#>Обратиться за помощью</a></li> 
 
     <li><a href=#>Управляющая компания</a></li> 
 
     <li><a href="second_page.html">Обратиться в Акимат</a></li> 
 
     <li><a href=#>Объявления</a></li> 
 
     <li><a href="page.html">Информация о строении</a></li> 
 
     <li><a href=#>Обсуждения</a></li> 
 
     <li><a href=#>Помощь</a></li> 
 
    </ul> 
 
    </div> 
 
    <section id="main_header"> 
 
    <div class="left_header"> 
 
     <a href="index.html"><img src="svg/logo.svg" alt="logo" style="height: 16px; padding-left: 15px;"></a> 
 
     <p class="text_ru">ru</p> 
 
    </div> 
 
    <div class="right_header"> 
 
     <img class="btn search" src="svg/search.svg" alt="search" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer; "> 
 
     <img class="btn" src="svg/pro.svg" alt="pro" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer;"> 
 
     <img id="button" class="btn" src="svg/sandwich.svg" alt="sandwich" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer;"> 
 
    </div> 
 
    </section> 
 
</header>

Answer 1

$(document).ready(function(){ 
 
    alert('gsdf') 
 
    $("#button").click(function(){ 
 
     $('.darklayer').toggleClass('active'); 
 
    }); 
 
});

body{margin:0; padding:0;} 
 
#main_menu{position: absolute; z-index: 2; width: 100%; } 
 
#main_header{ 
 
    opacity: 1; 
 
    width: 100%; 
 
    height: 50px; 
 
    background: #f0f0f0; 
 
    position: relative; 
 
    width: 100%;  z-index: 2; 
 
} 
 
#main_header .text_ru { 
 
    font-size: 15px; 
 
    color: rgb(12, 89, 163); 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    width: 18px; 
 
    height: 11px; 
 
    display: inline-block; 
 
    font-weight: 500; 
 
    margin-left: 20px; 
 
} 
 
p.text_ru {line-height: 1.929;} 
 

 
#main_header .left_header { 
 
    float: left; 
 
} 
 
#main_header .right_header { 
 
    float: right; 
 
    padding: 15px 15px; 
 
} 
 
.darklayer{position: absolute; width: 100%; height: 100%; background:#000; position: fixed; z-index: 1; display: none;} 
 
.darklayer.active{display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="darklayer"></div> 
 
<header id="main_menu"> 
 
     <div id="menu"> 
 
      <ul class="slide"> 
 
       <li><a href="#">Поиск строения</a></li> 
 
       <li><a href="#">Оплатить ком услуги</a></li> 
 
       <li><a href=#>Обратиться за помощью</a></li> 
 
       <li><a href=#>Управляющая компания</a></li> 
 
       <li><a href="second_page.html">Обратиться в Акимат</a></li> 
 
       <li><a href=#>Объявления</a></li> 
 
       <li><a href="page.html">Информация о строении</a></li> 
 
       <li><a href=#>Обсуждения</a></li> 
 
       <li><a href=#>Помощь</a></li> 
 
      </ul> 
 
     </div> 
 
     <section id="main_header"> 
 
      <div class="left_header"> 
 
       <a href="index.html"><img src="svg/logo.svg" alt="logo" style="height: 16px; padding-left: 15px;"></a> 
 
       <p class="text_ru">ru</p> 
 
      </div> 
 
      <div class="right_header"> 
 
       <img class="btn search" src="svg/search.svg" alt="search" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer; "> 
 
       <img class="btn" src="svg/pro.svg" alt="pro" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer;"> 
 
       <img id="button" class="btn" src="svg/sandwich.svg" alt="sandwich" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer;"> 
 
      </div> 
 
     </section> 
 
    </header>