我的目标是当有人在输入文本字段上搜索时简单地向 HTML 主体添加透明背景
搜索前
一次搜索
代码
<body>
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">Testing</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<form novalidate="novalidate" onsubmit="return false;" class="searchbox sbx-amazon" style="margin-left: 20%" id="search-realtime">
<div role="search" class="sbx-amazon__wrapper">
<input type="search" id="search_input" name="search" placeholder="Search your product.." autocomplete="off" required="required" class="sbx-amazon__input">
<button type="submit" title="Submit your search query." class="sbx-amazon__submit">
<svg role="img" aria-label="Search">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-11"></use>
</svg>
</button>
<button type="reset" title="Clear the search query." class="sbx-amazon__reset">
<svg role="img" aria-label="Reset">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-2"></use>
</svg>
</button>
</div>
</form>
</div>
</div>
</nav>
</div>
</body>
稍后在搜索输入中，输入“I will” 以查看结果
您可以查看 jsfiddle 以获取完整代码 https://jsfiddle.net/Ldpqhkam/2/
最佳答案
只需在 body 的某处(最好在底部)创建一个 div 元素，如下所示:
<div id="search-overlay"></div>
并给它这个 CSS:
#search-overlay { position:fixed; top:52px; bottom:0; left:0; right:0; background:#000; opacity:.5; display:none; }
然后，通过挂接到自动完成的适当事件(即 autocomplete:shown 和 自动完成:关闭
请参阅此处的工作示例: https://jsfiddle.net/Ldpqhkam/5/
关于javascript - 搜索时如何添加透明背景？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44355043/