Question

我有一个基本的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。从我现在的目标中获得这个目标的最佳方法是什么？

Answer 1

像

这样的东西

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

通过单击，按钮单击或转义键添加/删除div叠加

1 个答案: