всплывающее окно возвращается в скрытое состояние при нажатии вне области - PullRequest
Новая
       12

всплывающее окно возвращается в скрытое состояние при нажатии вне области

0 голосов
/ 11 апреля 2009

Если у меня есть всплывающее окно (с использованием div), как я могу получить div для возврата в скрытое состояние, когда кто-то щелкает где-то за пределами div?

т.е. всплывающее окно видно, затем кто-то щелкает за пределами всплывающего окна, div должен быть снова скрыт.

Как мне добиться этой функциональности?

Ответы [ 2 ]

5 голосов
/ 11 апреля 2009

Популярный способ сделать это с наложением. Когда вы создаете div всплывающее окно, также создайте <div id="overlay"> сразу под ним, который занимает весь экран: 

div#overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

При желании вы можете использовать это наложение для затемнения всего другого содержимого, например, background: #000 и opacity: 0.5.

После того, как вы создали свой JavaScript, чтобы добавить этот оверлей прямо под всплывающим окном, добавьте в него прослушиватель кликов. Когда пользователь нажмет на оверлей, вы узнаете, что он / она нажали за пределами вашего всплывающего окна.

Обратите внимание, что position: fixed не работает в старых браузерах. Один из обходных путей заключается в том, что, когда наложение видно, вместо этого установите наложение на position: absolute, а затем временно добавьте overflow: hidden к <body>, чтобы пользователь не мог прокрутить вниз.

3 голосов
/ 11 апреля 2009

Другой способ сделать это, который кажется мне более прямым, заключается в следующем: 

$("body").click(function (event) {
    var outside = $(event.originalTarget).parents("#popup").length === 0;
    if (outside) {
        $("#popup").remove();
        $("body").unbind("click");
    }
});

Короче говоря, originalTarget - это то, что фактически было нажато, и скрипт затем проверяет, является ли #popup одним из его предков (в jQuery это называется parents). Если это не так, щелчок был снаружи, и мы удаляем всплывающее окно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...