Nascondere un div con il tasto esc e off click? In Jquery

se ho un div che ho mostrato grazie ad un evento click - quali sono alcuni è stato facile chiuderlo se qualcuno ha cliccato ovunque al di fuori del div, o ha colpito il tasto esc?Nascondere un div con il tasto esc e off click? In Jquery

fonte

2012-02-17 Elliot

Con> 1K rep si dovrebbe sapere meglio di per fare una domanda come questa - cosa hai provato? –

Associare un listener di eventi a quegli eventi e nascondere il div. Vedi [Come rilevare un clic all'esterno di un elemento?] (Http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element) e [Quale keycode per la chiave di escape con jQuery ] (http://stackoverflow.com/questions/1160008/which-keycode-for-escape-key-with-jquery). –

Non sono un esperto JavaScript, ma questo dovrebbe aiutare: http://www.javascriptkit.com/jsref/eventkeyboardmouse.shtml. Usa onKeyPress per esc. Per il clic, avere un div trasparente o qualcosa che copre l'intera pagina, con il div in cima. Questo oggetto trasparente dovrebbe avere un onClick e tale clic sarà il clic finale. –

Qui si va ...

$(document).on('click', function (e) { 
    if ($(e.target).closest(elem).length === 0) { 
     $(elem).hide(); 
    } 
}); 

$(document).on('keydown', function (e) { 
    if (e.keyCode === 27) { // ESC 
     $(elem).hide(); 
    } 
});

Demo online:http://jsfiddle.net/S5ftb/

fonte

2012-02-17 18:42:07

perfetti grazie! – Elliot

Perché non funziona se l'elem ha una classe multipla ma funziona se sostituisco direttamente l'elem con la mia classe 2? – MIke

@MIke Come assegni 'elem'? Controlla se è davvero un riferimento al tuo elemento. –

Per quelli di voi che preferiscono la vaniglia:

<div id="div">Click me dude</div> 

<script> 
    d = document.getElementById("div"); 
    d.addEventListener("click",  function(e){e.stopPropagation()},true); 
    addEventListener("click",  function() {d.style.display="none"},false); 
    addEventListener("keypress", function(e){e.keyCode==27 &&(d.style.display="none")},false); 
</script>

fonte

2012-02-17 18:42:32

L'elemento deve essere nascosto solo se si verifica il clic * all'esterno * dell'elemento ... –

Yikes, buona cattura; Io rivedrò. –

Grazie per la soluzione non jquery! – Philipp

Nascondere un div con il tasto esc e off click? In Jquery

risposta

Problemi correlati