javascript - 使用 Bootstrap 弹出窗口作为模式

Question

我使用了搜索，有很多关于 Bootstrap 弹出窗口的问题，但我有一个特殊的问题。

很多人问如何修复弹出窗口，但我希望我的弹出窗口具有与 Bootstrap “模态”相同的功能(从顶部出现的东西，让屏幕变暗，你必须退出它才能返回网站)。必须单击我的弹出窗口，然后它就会出现并一直保留，直到您单击其他任何地方(如果您明白我的意思的话)。

Answer 1

正如我的评论中所述:

Why don't you use the modal in the first place? I guess customizing that to what you need could be easier then hacking popovers to behave like modals

在 this issue on Github @Fat建议改用焦点触发方法。 然而，我刚刚意识到我曾经在一个项目中遇到过同样的问题，我通过 Hook 可用事件并执行一些小技巧解决了它:

$( '.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' );
            }
        } );
    } );