开发者

Close container with a key event

开发者 https://www.devze.com 2023-04-06 00:36 出处:网络
i have a lot of containers in my page, the user want to be able to close then using the ESC key. is there any dynamic way to identify what containers its first ( like, highest z-index ), in case that

i have a lot of containers in my page, the user want to be able to close then using the ESC key.

is there any dynamic way to identify what containers its first ( like, highest z-index ), in case that i have more then one opened?

the way i'm doing this its very funny/ugly.

i'm reinvented the wheel, i think .

my js:

$(document).bind('keydown', function(e) { 
    if (e.which == 27) {

        if($(开发者_如何转开发"#container1").css("display") == "block"){
                // this is a sub-container inside the container1
                if($("#subContainer1").css("display") == "block"){
                    $("#subContainer1").fadeOut();
                }else{
                    $("#container1").stop(true,true).fadeOut('fast');
                }

        }else if($("#container2").css("display") == "block"){
               // this is a sub-container inside the container2
                if($('#subContainer2').css("display") == "block"){
                    $("#subContainer2").fadeOut();
                }else{
                    $("#container2").stop(true,true).fadeOut('fast');
                }
        }
    }
}); 

have any other intelligent way to do this ?

thanks!


Search through all of the containers. Find the one with the highest z-index. Hide that one when the keydown event fires.

$(document).bind('keydown', function(e) { 
    if (e.which == 27) {

        zindex = 0;
        zelem = null;

        $('.container').each(function(){
           thisindex = $(this).css('z-index');
           if(thisindex > zindex) {
               zindex = thisindex;
               zelem = $(this);
           }
        });

        zelem.hide() // or whatever
    }
}


i made some change's:

$(document).bind('keydown', function(e) { 
    if (e.which == 27) {

        eventHold = null;
        $('.escSuporKey').each(function(){
           thisdisplay = $(this).css('display');
           if(thisdisplay === "block") {
               eventHold = $(this);
           }
        });
        eventHold.fadeOut() // or whatever
    }
});
0

精彩评论

暂无评论...
验证码 换一张
取 消