Меня очень часто мучал этот вопрос и я никак не мог найти решение. Через некоторое время я нашел его и оно безумно простое. Ниже я опишу как оно работает и приведу пример того как это решение использовать. 

Немного расскажу для чего это используется. Если вам нужно скрыть элемент при нажатии на внешнюю часть элемента, то эта запись именно для вас.

Чтобы визуально представить вышеописанное, я сделал небольшую схему (смотреть ниже).

Квадрат 1 выделяет модальное окно и если на него нажать, то оно не закроется, при нажатии внутри квадрата 2 (кроме квадрата 1), модальное окно закроется (которые выделено цифрой 1).

Обычное демо модального окна

В демо ниже, я не использовал скрипт, про которые я говорил выше. Модальное окно из примера ниже можно закрыть только при нажатии на крестик в правом верхнем углу.

Демо с внешним закрытием окна

В этом демо я использовал скрипт закрытия модального окна при нажатии на внутреннюю часть.

Скрипт закрытия

$(document).mouseup(function (e)
{
    var container = $('Ваш контейнер');

    if ( !container.is(e.target) && container.has(e.target).length === 0){
        container.hide(); // Спрячет контейнер, который вы указали
    }
});

Вместо «Ваш контейнер» впишите элемент, для которого будет работать это правило.

Например, я прописал .modal (для примера «Демо с внешним закрытием окна»), поэтому внутри .modal окно закрываться не будет, а если нажать снаружи, то оно закроется.

Источник данного куска кода.

На этом все. Если у вас есть какие-либо вопросы или хотите что-то дополнить, то пишите свои комментарии ниже к этой записи.