Как скрыть один загрузчик-поповер при открытии другого? - PullRequest
Новая
       51

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

0 голосов
/ 15 января 2019

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

Привет всем, я пытаюсь сделать так, чтобы когда вы нажимали за пределами "popover" - он (popover) скрывался (вроде как я это сделал). И при этом я также пытаюсь сделать «исчезновение» первого всплывающего окна при нажатии на другое (второе) событие календаря (событие «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 Пожалуйста, простите меня за мой английский, если что-то не так.

Ответы [ 2 ]

0 голосов
/ 15 января 2019 
element.popover({
                    animation: true,
                    placement: "auto",
                    html: true,
                    container: "#calendar",
                    title: event.title,
                    trigger: "click",
                    content: function() {
                        $('.popover').popover('hide')
                         return $("#popover-content").html();
                    }
                });
0 голосов
/ 15 января 2019

Чтобы закрыть любой предыдущий открытый поповер, вы можете позвонить .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();
    }
});
...