jQuery 通过 ESC 和点击切换

Question

我有这个简单的脚本

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

我不知道怎么办 1）隐藏.modal如果是ESC presed 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();
        }
    });

编辑

我最近遇到了 bootstrap 模态，它已添加到 v3 中。它正是你想要的。一个好的起点是 official site and here.

例如如果你想使用 esc 键关闭你的模式，你所要做的就是：

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

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

jQuery 通过 ESC 和点击切换

jQuery toggle by ESC and clicking

jquery

show

hide

编辑