打开另一个时如何隐藏一个引导弹出窗口？

Question

（引导程序 4）

大家好，我正在尝试这样做，以便当您在“popover”之外单击时 - 它（popover）正在隐藏（有点像我所做的）。 在这样做的同时，我还试图在单击另一个（第二个）日历事件（Fullcalendar 中的“eventClick”事件）和另一个弹出窗口时使第一个弹出窗口“消失”。 但我不明白该怎么做。

PS如果仅在事件为“eventClick”（FullCalendar的事件）时才显示弹出框，则弹出框仅在第二次单击后出现，对于每个事件。

代码： Codepen.io

或者：

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");
    });
}

PS2 如果有什么问题，请原谅我的英语。

Answer 1

为了关闭任何以前打开的弹出窗口，您可以调用.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();
                    }
                });

打开另一个时如何隐藏一个引导弹出窗口？

问题描述

2 个解决方案

解决方案1
1 已采纳 2019-01-15 18:27:07

解决方案2
0 2019-01-15 18:27:38

打开另一个时如何隐藏一个引导弹出窗口？

问题描述

2 个解决方案

解决方案1 1 已采纳 2019-01-15 18:27:07

解决方案2 0 2019-01-15 18:27:38

解决方案1
1 已采纳 2019-01-15 18:27:07

解决方案2
0 2019-01-15 18:27:38