要像Modalbox一样在屏幕中央打开Bootstrap Popover,可以通过以下步骤实现:
<button type="button" class="btn btn-primary" data-toggle="popover" data-placement="auto" title="Popover Title" data-content="Popover Content">Open Popover</button>
container
属性为body
,以确保Popover的位置相对于整个页面而不是触发元素。同时,设置placement
属性为auto
,以便Popover根据可用空间自动选择最佳位置。$(function () {
$('[data-toggle="popover"]').popover({
container: 'body',
placement: 'auto'
});
});
.popover {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
$(function () {
$('[data-toggle="popover"]').on('shown.bs.popover', function () {
var popover = $(this).data('bs.popover').tip();
var popoverWidth = popover.outerWidth();
var popoverHeight = popover.outerHeight();
popover.css({
'margin-left': -popoverWidth / 2 + 'px',
'margin-top': -popoverHeight / 2 + 'px'
});
});
});
完成上述步骤后,当点击触发元素时,Popover将在屏幕中央打开。
请注意,以上答案中没有提及任何特定的云计算品牌商,如有需要,可以根据具体情况选择适合的云计算服务提供商。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云