Bootstrap中popover位置调整和使用实例

最新推荐文章于 2023-09-27 21:51:21 发布

那你不就好厉害

最新推荐文章于 2023-09-27 21:51:21 发布

阅读量6.3k

点赞数

分类专栏：前端相关文章标签： bootstrap html css

本文链接：https://blog.csdn.net/include_fight/article/details/84665925

版权

前端相关专栏收录该内容

1 篇文章 0 订阅

订阅专栏

弹出框插件的简单教程：Bootstrap 弹出框（Popover）插件 | 菜鸟教程

现有一个表格，表格每一行有button，希望点击删除的button后出现弹出框询问是否删除，先上效果图：

bootstrap popover插件本身提供了placement选项，可以对弹出框的显示位置进行选择，我这里选的bottom：

placement

string|function
默认值：top

data-placement

规定如何定位弹出框（即 top|bottom|left|right|auto）。
当指定为 auto 时，会动态调整弹出框。例如，如果 placement 是 "auto left"，弹出框将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。

弹出框内容设置为：

<li><a th:href="'javascript:void(0);'" class="pop" title="确认删除该代理？" th:onclick="'javascript:saveId(\''+${agent.id}+'\')'"
data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="manual"
data-content="<button type='button' class='btn btn-danger'
onclick='deleteRequest()'>确定</button>
<button type='button' class='btn btn-default'>取消</button>">删除</a></li>

因为我的删除按钮是在下拉菜单中，我遇到的问题是，点击删除后，弹出框总是出现在删除按钮下方，希望能够指在【更多】按钮上，百度出来的结果是可以css设置.popover覆盖bootstrap的默认样式，例：如何修改BootStrap popover的默认样式？（代码）-js教程-PHP中文网

我尝试设置了.popover

.popover{
    top: -10px !important;
    background: red;
}

top不加 !important的话是无效的，但加了之后发现这是相对于<body>的布局，不是相对于触发它的按钮。

最终发现了可以设置另一个属性

.popover.bottom {
    margin-top: -50px;
}

弹出框顺利相对于删除按钮上移，指向更多按钮。

Tip：

我这里displacement选的是buttom，所以设置 .bottom，如果是其他比如left，相应的应该设置 .popover.left

那你不就好厉害

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap中popover位置调整和使用实例

弹出框插件的简单教程：http://www.runoob.com/bootstrap/bootstrap-popover-plugin.html现有一个表格，表格每一行有button，希望点击删除的button后出现弹出框询问是否删除，先上效果图：bootstrap popover插件本身提供了placement选项，可以对弹出框的显示位置进行选择，我这里选的bottom：...
复制链接

扫一扫