Question

(bootstrap 4)

Hi all, I'm trying to make it so that when you click outside "popover" - it (popover) was hiding (kind of like I did it). And while doing so, I'm also trying to make the "disappearance" of the first popover when clicking on another(second) calendar event ("eventClick" event in Fullcalendar) and the appearance of another. But I can not understand how to do it.

P. S. If to show the popover only when the event is "eventClick"(FullCalendar's event), then the popover appears ONLY after the second click, for each event.

Code: 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 Please, forgive me for my English if something is wrong.

Answer 1

In order to close any previous opened popover you can call .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();
    }
});

Answer 2

element.popover({
                    animation: true,
                    placement: "auto",
                    html: true,
                    container: "#calendar",
                    title: event.title,
                    trigger: "click",
                    content: function() {
                        $('.popover').popover('hide')
                         return $("#popover-content").html();
                    }
                });

How to hide one bootstrap-popover when opening another?

2 个答案: