Question

我正在使用bootstrap 3.0来显示#fullCalendar中每个事件的创建弹出窗口。下面是代码。在eventAfterRender里面：函数

element.popover({ title:'<b>Title :</b>'+ event.title, placement: 'auto left', container: 'body', html:'true', content:'<b>Start:</b> ' + event.start + '<br /> <b>End:</b> ' + event.end +'<br /><b>created by:</b> ' + event.username + '<br /><b>Description:</b> ' + event.description + '<br> <a data-toggle="modal" href="#taskEditDialouge" class="editEvent" id="EditEvent" >Edit</a> </t></t> ' }

的所以上面的代码在日历上呈现所有弹出窗口。

以下代码是隐藏popover 的的

的
$(document).on('click', function (e) { if (!element.is(e.target) && element.has(e.target).length === 0 && $('.popover').has(e.target).length === 0) element.popover('hide'); });

的

但是当我调用hide方法来隐藏当前的popover并显示其他代码时，下面的代码没有从代码中逃脱，因为我无法使用此代码后面的日历上的其他元素。

<div class="popover fade left" style="top: 245px; left: 736px; display: block;" data-original-title="" title=""><div class="arrow"></div><h3 class="popover-title"><b>Title :</b>group task</h3><div class="popover-content"><b>Start:</b> Tue Nov 05 2013 00:00:00 GMT+0530 (IST)<br> <b>End:</b> null<br><b>created by:</b> x<br><b>Description:</b> <br> <a data-toggle="modal" href="#taskViewDialouge" class="viewEvent" id="ViewEvent:7231384945464">View</a> <a data-toggle="modal" <a="" href="#" class="completeEvent" id="CompleteEvent:7231384945464">Mark Done</a> </div></div> <div class="arrow"></div> <h3 class="popover-title"><b>Title :</b>group task</h3> <div class="popover-content"><b>Start:</b> Tue Nov 05 2013 00:00:00 GMT+0530 (IST)<br> <b>End:</b> null<br><b>created by:</b> x<br><b>Description:</b> <br> <a data-toggle="modal" href="#taskViewDialouge" class="viewEvent" id="ViewEvent:7231384945464">View</a> <a data-toggle="modal" <a="" href="#" class="completeEvent" id="CompleteEvent:7231384945464">Mark Done</a> </div>

任何人都可以帮忙吗？注意：切换工作完美，并与日历，但隐藏方法不能正常工作，我必须一次只显示一个弹出窗口，如果点击页面上的任何地方，应隐藏popover。

Answer 1

最后我得到了这个问题的解决方案。

为此，我们需要创建一个全局变量var visiblePopover; 现在，在eventAfterRender方法内的代码下方将隐藏popover，点击弹出窗口并打开一个新的

element.on('click', function(e) {
                // don't fall through
                e.stopPropagation();
                var $this = $(this);
                // check if the one clicked is now shown
                 if ($('.popover').hasClass('in')) {
                    // if another was showing, hide it
                   visiblePopover && visiblePopover.popover('toggle');
                    // then store the current popover
                    visiblePopover = $this;
                } else {
                    // if it was hidden, then nothing must be showing
                    visiblePopover = '';
                }
            });

现在要隐藏popover以免在窗口中的任何地方点击以下代码

// hide all popovers if any non-popover part of the body is clicked
            $(document).on('click', function () {
                visiblePopover && visiblePopover.popover('toggle');
                visiblePopover = '';
            });

如果#fullcalendar按钮和导航仍无效，则添加波纹管功能。 - 感谢#arshaw

，此事件销毁方法

 eventDestroy: function(event, element) {
                   console.log(visiblePopover);
                    visiblePopover && visiblePopover.popover('toggle');
                visiblePopover = '';
                },

bootstrap 3.0 popover（'hide'）方法：不使用多个弹出框内容和标题未删除

1 个答案: