Закрытие модального окна кликом мыши на любую область страницы, кроме самого модального окна?

Question

[prolina]

Всем здравствуйте. В данный момент, при клике на любую область страницы, кроме модального окна(#pop-up), модальное окно закрывается, но при этом, если повторно хочешь, чтобы появилось модальное окно - оно не появляется. Как сделать, чтобы была возможно закрывать и снова открывать модальное окно несколько раз?

$(".item-box").click( function() {
   var id = $(this).attr("data-product"),
child = id-1;
$("#pop-up .gallery-cell").eq(child).show();
$("#pop-up").show();
$("#pop-up").css("z-index",3000000);
$("#all").css({"background-color":"rgba(0,0,0,0.6)", "z-index":15000}); 
     var $body = $(document.body),
         $popup = $("#pop-up");
 $body.on("mousedown", function () {
    $popup.remove();
    $("#all").css({"opacity":1,"background":"white"});
// клик по самому поп-апу не должен его закрывать
$popup.on("mousedown", function (e) {
    e.stopPropagation();      
    });
 });

$(".main-gallery").flickity({
        cellAlign: 'left',
        contain: true,
        freeScroll: true,
        wrapAround: true,
        pageDots: false
           
});
});

Comments

[Andrew]

То есть вы юзаете готовый слайдер-карусель, но всплывашку саму решили сварганить?
Код в песочницу любую закиньте, а лучше, посмотрите как реализовано в magnific,fancybox etc.

[prolina]

Спасибо! Как-то и в голову не приходило, что могут быть плагины. Думаю, могут быть полезными такие вещи)

Answer 1

[Дмитрий Беляев]

Вот этим $popup.remove(); Вы удаляете элемент из DOM, а нужно просто скрывать
если память не изменяет $popup.hide();

Comments

[prolina]

Да, всё верно) Спасибо!

Answer 2

[Stalker_RED]

$body.on("mousedown", function (e) {
    if ($.contains($popup, e.target)) {
        e.stopPropagation();
    } else {
        $popup.remove();
        $("#all").css({"opacity":1,"background":"white"});
    }
 });