我有一个基本的 div 叠加层，当用户在输入框内单击时它会起作用:
HTML
<html>
<body>
<input id="search" type="text" placeholder="Search...">
</body>
</html>
CSS
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 10000;
display: block;
}
JS
$(function() {
var overlay = $('<div id="overlay"> </div>');
$("#search").one('click', function(e) {
overlay.appendTo(document.body)
});
});
我的总体目标是通过在输入框外单击、按退出按钮或单击我计划放在表单右侧的按钮来“隐藏”此 div。根据我目前拥有的资源，实现此目标的最佳方法是什么？
最佳答案
有点像
jQuery(function ($) {
$("#search").on('click', function (e) {
if (!$('#overlay').length) {
$('body').append('<div id="overlay"> </div>')
}
}).keyup(function (e) {
if (e.which == 27) {
$('#overlay').remove();
}
}).blur(function (e) {
$('#overlay').remove();
});
$('body').click(function (e) {
if (!$(e.target).is('#search')) {
$('#overlay').remove();
}
})
});
演示:Fiddle
关于jquery - 通过单击、按钮单击或转义键添加/删除 div 覆盖，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20509609/