时间戳

首页 > 解决方案 > 允许 Bootstrap4 的弹出框溢出屏幕

bootstrap-4 - 允许 Bootstrap4 的弹出框溢出屏幕

问题描述

我正在尝试使用 BS4 基于 Popper.js 的弹出框功能。

我在显示的事件上动态地向它添加内容，我需要它保持锚定到触发按钮并让正文滚动而不是在其内容没有空间时移动到屏幕顶部。

我真的认为这个答案应该是正确的，但不幸的是没有。

下一个示例是使用静态内容制作的，但我实际上是在页面加载时使用动态内容填充弹出框，因此请在您的答案/评论中考虑到它。

谢谢

内容少的例子

$('#show-popover').popover({
        container: 'body',
        html: true,
        offset: 100,
        positionFixed: true
});
button{
  position: absolute;
  right: 0
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


<!--THIS IS WITH STATIC CONTENT AND IT DOES NOT WORK EITHER-->
<br/>
<button id="show-popover" data-placement="bottom" tabindex="0" class="btn btn-sm btn-light" role="button"
                            data-toggle="popover" title="WANTED BEHAVIOR" data-display="static" data-flip="static" data-content="<br/>a<br/>a<br/>">
                        TRIGGER
                    </button>
                    
                    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

包含大量内容的示例

$('#show-popover').popover({
        container: 'body',
        html: true,
        offset: 100,
        positionFixed: true
});

$('#show-popover').click(()=>{
  $('#explain').show();
});
button{
  position: absolute;
  right: 0
}

#explain{
position: absolute;
left: 0;
display: none
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


<!--THIS IS WITH STATIC CONTENT AND IT DOES NOT WORK EITHER-->
<br/>
<div id="explain">As you can see, it jumps to the top of the page, <br/>instead of staying anchored to the button</div>
<button id="show-popover" data-placement="bottom" tabindex="0" class="btn btn-sm btn-light" role="button"
                            data-toggle="popover" title="UNWANTED BEHAVIOR" data-display="static" data-flip="static" data-content="<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>">
                        TRIGGER
                    </button>
                    
                    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

标签： bootstrap-4bootstrap-popoverpopper.js

解决方案

将容器从主体更改为您想要附加到的按钮，它将在按钮内呈现弹出窗口。然后，您将不得不稍微改变 css 以满足您的需要。例子：

$('#show-popover').popover({
        container: '#show-popover',
        html: true,
        offset: 100,
        positionFixed: true
});

$('#show-popover').click(()=>{
  $('#explain').show();
});
button{
  position: absolute;
  right: 10px;
  width: 200px;
}

button .arrow {left:50%; margin-left: -8px;}
button .popover {top: 20px !important;}

#explain{
position: absolute;
left: 0;
display: none
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


<!--THIS IS WITH STATIC CONTENT AND IT DOES NOT WORK EITHER-->
<br/>
<div id="explain">As you can see, it jumps to the top of the page, <br/>instead of staying anchored to the button</div>
<button id="show-popover"  data-placement="top" tabindex="0" class="btn btn-sm btn-light" role="button"
                            data-toggle="popover" title="UNWANTED BEHAVIOR" data-display="static" data-flip="static" data-content="<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>">
                        TRIGGER
                    </button>
                    
                    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

推荐阅读