Question

我已经使用了搜索，但是关于bootstrap popover的问题很多，但我有一个特殊的问题。

很多人都问过如何修复一个弹出窗口，但我想让我的popover具有与bootstrap相同的功能＆＃34; modal＆＃34; （从顶部出现的东西，让屏幕变暗，你必须退出它才能回到网站）。我的popover必须被点击，然后它会出现，直到你点击其他任何地方，如果你知道我的意思。

Answer 1

如我的评论中所述：

为什么不首先使用模态？我想根据你的需要定制它可能会更容易，然后破解popovers行为就像模态

在this issue on Github @Fat建议使用焦点触发方法。但是我刚才意识到我曾经在一个项目中遇到过同样的问题，我通过勾选可用的事件并执行一个小技巧解决了这个问题：

$( '.popover-element' )
    .on( 'show.bs.popover', function ( e ) {
        $( 'body' ).one( 'click', function ( e ) {
            if ( !$( e.target ).parents( '.popover-element' ).length ) {
                // After the popover has been opened we catched a
                // click event that bubbled up to the body element.
                // Since the .popover-element is not a parent of the
                // element (.length === 0) that originated this event
                // we can assume that the user clicked outside of it 
                // and can thus close the popover.
                $( '.popover-element ).popover( 'hide' );
            }
        } );
    } );

另请参阅event.target和popover documentation（特别是方法和事件）。

这是一个应与您的来源兼容的版本：

$( '[rel=popover]' )
    .popover( {
        trigger: 'hover',
        html:    true,
        delay:   500      
    } )
    .on( 'show.bs.popover', function ( e ) {
        var $popover = $( this );
        $( 'body' ).one( 'click', function ( e ) {
            if ( !$( e.target ).parents().filter( $popover ).length ) {
                $popover.popover( 'hide' );
            }
        } );
    } );

使用bootstrap popover作为模态

1 个答案: