如何实现除.search-bar外页面背景变暗，修复点击无后续响应问题

我来帮你搞定这个问题啦～先梳理下你现有代码的几个小问题：

• 只给.search-bar绑定了点击事件，所以只有点它的时候才会触发背景变暗，其他区域点击没反应
• 每次点击.search-bar都会往body里新增一个#overlay，重复点击会生成多个叠加层
• 没有处理让input自动获得焦点的逻辑

接下来是修复后的完整代码，逻辑已经理得明明白白：

HTML结构（和你的保持一致） #

<div class="search-bar">
  <input type="text" class="search-btn" placeholder="Поиск по ключевым словам">
</div>

JavaScript代码（基于jQuery） #

$(function() {
  // 提前创建overlay元素，避免重复添加DOM
  const $overlay = $("<div id='overlay'></div>").hide().appendTo('body');
  // 设置overlay的基础样式
  const docHeight = $(document).height();
  $overlay.css({
    'opacity': 0.4,
    'position': 'fixed', // 用fixed适配页面滚动场景，始终覆盖整个视口
    'top': 0,
    'left': 0,
    'background-color': 'black',
    'width': '100%',
    'height': docHeight,
    'z-index': 5000
  });

  const $searchBar = $('.search-bar');
  const $searchInput = $('.search-btn');

  // 监听整个页面的点击事件
  $(document).on('click', function(e) {
    const target = e.target;
    // 判断点击的是否是搜索栏或其内部元素
    const isClickOnSearchBar = $searchBar.has(target).length > 0 || $searchBar.is(target);
    
    if (isClickOnSearchBar) {
      // 点击搜索栏时：显示暗层，高亮搜索栏，让输入框自动聚焦
      $overlay.show();
      $searchBar.css({
        'background': '#fff',
        'position': 'relative',
        'z-index': 5700
      });
      $searchInput.focus();
    } else {
      // 点击其他区域时：显示暗层（完全满足你点击任意区域都变暗的需求）
      $overlay.show();
      // 如果需要点击其他区域时恢复搜索栏默认样式，可解开下面的注释
      // $searchBar.css({
      //   'background': '',
      //   'position': '',
      //   'z-index': ''
      // });
    }
  });

  // 可选：如果需要点击暗层时执行额外逻辑（比如隐藏暗层），可以加这段
  $overlay.on('click', function() {
    // 这里可以添加你想要的操作，比如：
    // $overlay.hide();
    // $searchBar.css({'background': '', 'z-index': ''});
  });
});

关键逻辑说明 #

• 提前创建并隐藏#overlay，避免重复添加DOM元素导致的冗余问题
• 用fixed定位替代absolute，保证页面滚动时暗层始终覆盖整个视口
• 监听整个document的点击事件，通过判断点击目标位置，分别处理不同场景
• 点击搜索栏时自动让输入框获得焦点，精准匹配你的需求
• 点击页面任何区域都会触发背景变暗，完全符合你的预期目标

如果你需要点击其他区域时隐藏暗层而非保持变暗，只需要把else分支里的$overlay.show()改成$overlay.hide()，同时恢复搜索栏的默认样式即可～

内容的提问来源于stack exchange，提问作者user248462