使用引导弹出框作为模式

Question

我使用了搜索，关于引导弹出框有很多问题，但我有一个特殊问题。

很多人问如何修复弹出框，但我希望我的弹出框具有与引导程序“模态”相同的功能（从顶部出现的东西，让屏幕变暗，你必须退出它才能返回网站）。必须单击我的弹出框，然后它会出现并一直存在，直到您单击其他任何地方，如果您知道我的意思。

Answer 1

正如我在评论中所说：

为什么不首先使用模态？我想根据您的需要定制它可能比破解弹出框像模态一样更容易

在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' );
            }
        } );
    } );