Как скрыть один бутстрап-поповер при открытии другого?

(начальная загрузка 4)

Привет всем, пытаюсь сделать так, чтобы при нажатии снаружи "поповер" - он (поповер) прятался (вроде как у меня получилось). И при этом я также пытаюсь сделать «исчезновение» первого всплывающего окна при нажатии на другое (второе) событие календаря (событие «eventClick» в Fullcalendar) и появление другого. Но я не могу понять, как это сделать.

P. S. Если показывать всплывающее окно только при событии "eventClick" (событие FullCalendar), то всплывающее окно появляется ТОЛЬКО после второго клика для каждого события.

Код: Codepen.io

OR:

HTML:

<body>
<ul id="popover-content" class="list-group" style="display: none">
    <a href="#" id="Eventaaa" class="list-group-item" onclick="aaa();">aaa</a>
    <a href="#" id="Eventbbb" class="list-group-item" onclick="bbb();">bbb</a>
    <a href="#" id="Eventccc" class="list-group-item" onclick="ccc();">ccc</a>
</ul>
<div id='calendar'></div> ...

JS:

$(document).ready(function() {
$("#calendar").fullCalendar({
    header: {
        left: "prev,next today",
        center: "title",
        right: "month,agendaWeek,agendaDay,listDay"
    },
    themeSystem: "bootstrap4",
    locale: "ru-RU",
    defaultDate: "2018-03-12",
   ...
        eventRender: function(event, element, view) {
        element.popover({
            animation: true,
            placement: "auto",
            html: true,
            container: "#calendar",
            title: event.title,
            trigger: "click",
            content: function() {
                return $("#popover-content").html();
            }
        });
    },
    editable: true,
    eventLimit: true,
 ...
$("body").on("click", popoverCloseByOutsideClick);

function popoverCloseByOutsideClick(e) {
    var isNotPopover = !$(e.target).hasClass('.popover'), isNotPopoverChild = ($(e.target).parents('.popover').length === 0), isNotEvent=!$(e.target).hasClass('.fc-event-container'), isNotEventChild = ($(e.target).parents('.fc-event-container').length === 0);
    // if (!isNotEvent || !isNotEventChild) {
    //     // console.log($(e.target));
    //     // closePopovers();
    //     // e.target.popover('hide');
    //     // $(e.target).popover('show');
    // }
    if (isNotPopover && isNotPopoverChild && isNotEvent && isNotEventChild) {
        closePopovers();
    }
}

function closePopovers()
{
    $.each($(".popover"), function(i, el) {
            if ($(el).hasClass("show")) $(el).removeClass("show");
    });
}

P.S.2 Пожалуйста, простите меня за мой английский, если что-то не так.


javascript jquery bootstrap-4 fullcalendar bootstrap-popover
person Aiswe    schedule 15.01.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Чтобы закрыть любое предыдущее всплывающее окно, вы можете вызвать .popover('hide')< /а>:

element.popover({
    animation: true,
    placement: "auto",
    html: true,
    container: "#calendar",
    title: event.title,
    trigger: "click",
    content: function() {
        // for each opened popover...hide it
        $("#calendar .popover.show").popover('hide');
        //                   ^^^^^
        return $("#popover-content").html();
    }
});
person gaetanoM    schedule 15.01.2019
comment
Спасибо, было очень легко! Могу ли я попросить у вас совета, насколько адекватно и правильно я достиг первой цели? (Закрытие всплывающего окна при нажатии вне его) - person Aiswe; 15.01.2019