Исчезает Javascript "модальное окно" при нажатии на фон?

Question

У меня есть модальное окно в CSS, которое я добавляю в Javascript.HTML выглядит следующим образом:

<div class="whiteout">
<div class="modal">
    <a class="modal-close" title="Close"></a>
    // modal window content
</div>
</div>

А CSS выглядит следующим образом:

.whiteout {
    display: none;
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    background-color: #fff; 
    background-color: rgba(255, 255, 255, 0.7);
}
.modal {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 200;
    border: 12px solid #666;
    border: 12px solid rgba(0, 0, 0, 0.5);
    -moz-border-radius: 12px;
    border-radius: 12px;
}

Я использую jQuery для отображения модального окна, когда я нажимаю на ссылку, сwhiteout ", и я хочу, чтобы он исчезал при нажатии на фон.

$('.share-link').click( function() {
    $('.whiteout').fadeIn();
    return false;
} );
$('.whiteout').click( function() { // click the background
    $(this).fadeOut();
} );
$('.modal-close').click( function() { // close button on the modal window
    $('.whiteout').fadeOut();
} );

Однако, он исчезает всякий раз, когда я щелкаю модальное окно, а также фон, потому что технически это внутри«белый» элемент.Можно ли остановить это, когда я щелкну внутри элемента .modal?

Answer 1

попробуйте это:

$('.whiteout').click( function(e) { // click the background
    if(e.target == this)
       $(this).fadeOut();
} );

Answer 2

Лучше всего было бы переместить разделитель whiteout в конец тела полностью за пределы области содержимого. При правильном CSS элемент whiteout может жить где угодно в DOM, но при этом достигать нужного эффекта.

В качестве примера рассмотрим, как работает диалоговое окно jQuery UI , оно работает почти точно так же.