Am I optimally closing this modal window?

Question

I have a modal window that needs to be closed, obviously. I've created this piece of code that works okay. But is there a way to optimize it?

// close the modal window
$('.modal-close').click(function(e) {       
    $('#modal').hide();
    $('#modal-overlay').hide();

    e.preventDefault();
});

$(document).keydown(function(e) {
    if (e.keyCode == 27) { // if Esc key is pressed
        $('#modal').hide();
        $('#modal-overlay').hide();
    }

    if (e.keyCode == 9) { // cancel the Tab key
        return false;
    }
});

Answer 1

You can combine a couple of things: The close functionality can be function, and jQuery can operate on several elements at once:

function closeModal(event) { // passing in an event obj is optional
  $("#modal, #modal-overlay").hide();
  if(event) {
    event.preventDefault();
  }
}

$(".modal-close").click(closeModal);

$(document).keydown(function(event) {
  switch(event.keyCode) {
    case 27: // esc
      closeModal();
      break;
    case 9: // tab
      event.preventDefault();
      break;
    default: // everything else
      break;
  }
}

I've switched the keydown handler to use a switch statement, but that's not critically important. The point is just that since the keycode will be either one number or the other, there's no need for multiple ifs, and a switch is simple to extend if you need to handle more keycodes.