jQuery通过ESC切换并单击

Question

我有这个简单的脚本

$(".showHide").click(function (e) {
    e.stopPropagation();
    jQuery(this).children('.showHide').toggle();
});

我不知道该怎么做 1）隐藏.modal如果是ESC预设 2）如果用户在.modal-inside

之外点击，则隐藏.modal

https://jsfiddle.net/zkx9gt2u/1/

Answer 1

这应该可以解决问题。

$(".showHide").click(function (e) {
    e.stopPropagation();
    $(".showHide").children('.showHide').toggle();
});

$(".modal-inside").click(function (e) {
    e.stopPropagation();
});

$(document).bind('keydown', function(e) { 
        if (e.which == 27) {
            $(".showHide").children('.showHide').hide();
        }
    });

修改

我最近遇到了在v3中添加的bootstrap模式。它完全符合你的要求。一个好的起点是official site和here。

E.g。如果你想用esc键关闭你的模态，你所要做的就是：

var options = {
    "backdrop" : "static"
}

$('#id-of-modal').modal(options);