亲测有效：bootstrap 弹出框点击其他区域时弹出框不消失选项设置

最新推荐文章于 2023-05-16 10:10:33 发布
最新推荐文章于 2023-05-16 10:10:33 发布
阅读量2.8k 收藏 2
点赞数 5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/k912120/article/details/84317599
版权

将data-backdrop="static"  加入到下方处，亲测有效

<div class="modal fade" id="gcDataModel" tabindex="-1" role="dialog" 
aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" >

</div>


 

安康全是山
关注
  • 5
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap提示框定时消失
03-29
bootstrap设置时间可以提示框定时消失。
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
09-02
弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。本文给大家介绍BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法，喜欢的朋友参考下吧
巧妙解决Bootstrap中lay控件确认弹出框不关闭问题
夏日清风
08-10 3850
1、开发前景：给弹出的重置密码的layer层加一层确认提示，直接想到了使用larer控件的confirm方法，废话少说，前端部分代码 如下： /** * 点击重置密码 * @author 研发部-sunwh 2018-07-19 * @param {[type]} enterCode [企业代码] * @return {[type]} [description] ...
bootStrap下拉菜单 点击下拉列表某个元素，列表不隐藏
xiaozhen0610的博客
07-24 461
html： <a class="dropdown-toggle bgImg-priceWran " id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"></a> <div class="dropdown-menu priceWarn_list" aria-labelledby="dropdownMenu1"> &lt
bootstrap 弹出框popover 鼠标划过离开不消失或延迟消失
09-16 894
如果是点击显示,则需要再次点击原处,才 能关闭弹窗,所以,用滑动功能可以解决,只是手机版上怕是不行. <div class="div1"> <li role="button"data-toggle="popover"data-placement="left" title="Related goods" data-content="<a style='width:120px;' href='/?a=cp5'>123</a>"> <span
Bootstrap实现提示框和弹出框效果
08-31
在本主题中，我们将深入探讨如何使用Bootstrap实现提示框（Tooltip）和弹出框（Popover）效果。 提示框（Tooltip）是Bootstrap提供的一种轻量级的交互元素，用于在鼠标悬停在某个元素上时显示额外的信息。在...
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
12-10
Bootstrap弹出框是一种常见的网页交互元素，用于提供额外的信息或者操作选项。在Bootstrap框架中，弹出框（Popover）常用于创建悬浮提示信息，通过点击或悬停在特定元素上触发显示。本篇将深入讲解如何自定义...
关于Bootstrap弹出框无法调用问题的解决办法
09-02
Bootstrap弹出框，也称为Popover，是前端开发中常用的一个交互元素，用于展示额外的信息或者操作选项。在本文中，我们将深入探讨当Bootstrap弹出框无法正常调用时可能遇到的问题及其解决办法。 首先，Bootstrap的弹...
JS组件Bootstrap实现弹出框效果代码
01-19
当提示框与.btn-group 或 .input-group联合使用时，你需要指定container: ‘body’选项（见下面的文档）以避免不需要的副作用（例如，当弹出框显示之后，与其合作的页面元素可能变得更宽或是去圆角）。 在禁止使用的...
Bootstrap实现带动画过渡的弹出框
09-01
这里，`.fade`类是实现动画效果的关键，它使得弹出框在出现和消失时有渐变的效果。`data-dismiss="modal"`属性用于关闭弹出框，而`.close`按钮则是关闭弹出框的触发元素。 然后，我们需要一个触发弹出框显示的元素...
Bootstrap的popover（弹出框）2秒后定时消失的实现代码
10-20
Bootstrap Popover（弹出框）是使用定制的 Jquery 插件创建的。它可以用来显示任何元素的一些信息。这篇文章主要介绍了Bootstrap的popover（弹出框）2秒后定时消失功能，需要的朋友参考下
html 点击提示并消失,【已解决】用Bootstrap给html中添加显示后可以消失掉的提示或警告...
weixin_30291543的博客
06-03 432
折腾：期间，想要去给用户一个提示，让用户手动点击播放按钮，才能播放音乐。看到文档中有：去试试不过发现：tooltip貌似更加适合此处场景？难道是tooltip必须手动点击才可以？好像是可以代码控制显示和消失的。bootstrap dismissable tipbootstrap dismissable alert期间：此处，暂时不用自动消失的那种了也不用显示后，用visibility是show还是...
bootstrap模态框取消点击空白的地方模态框消失
weixin_46389242的博客
09-28 301
使用bootstrap模态框，取消点击空白的地方模态框消失 data-backdrop="static"
bootstrap的弹窗(popover),如何点击隔几秒后自动消失
殇~浅心
03-15 2434
前端太菜，bootstrap官网那个自动消失的弹窗不知道怎么，就是触发不出来，于是乎，只能自己在不消失的弹窗那下手 button标签代码是这样的，就普通的，官网那个弹窗代码，各个参数要带上 location.href是我自己要跳转的，这个可以无视 js代码： js用延迟的函数就行了，1.5秒后消失 function hide(){ //这个函数用来控制几秒后消失，这里是1500ms ...
bootstrap-confirmation
nbme的博客
08-22 5295
bootstrap-confirmation按钮提示组件，它类似于js里面confirm的功能,界面更加美观。 介绍这个组件之前，可以先来看看bootstrap里面提示框的效果： 1、源码地址 http://ethaizone.github.io/Bootstrap-Confirmation/ 2、效果展示 3、代码示例 所需引入的js和css
Bootstrap - 完美去除按钮点击后出现 “阴影边框“ 样式，按钮点击之后会有蓝色边框显示（全局 / 局部解决方案）
王佳斌
05-16 1384
Bootstrap按钮组件点击出现的边框怎样去掉，去除bootstrap中点击按钮,按钮会显示边框样式，解决bootstrap的button按钮点击之后会有蓝色边框的问题，bootstrap 按钮点击后出现边框，解决bootstrap的button按钮点击之后会有蓝色边框的问题，解决bootstrap按钮点击后再移入出现蓝色边框，如何去掉bootstrap按钮外边出现的边框，去除bootstrap按钮点击后的边框，Bootstrap按钮轮廓和单击轮廓后，去除bootstrap中点击按钮,按钮会显示边框样式，
Bootstrap响应式导航栏的学习和如何清除汉堡按钮(.navbar-toggler)点击后的黑边框
黛琳ghz的博客，期待你的关注。
10-13 3936
导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。
让Bootstrap的popover在鼠标移入弹窗时不消失
weixin_34380781的博客
04-07 345
使用bootstrap的popover，trigger设置为hover时，可以实现当鼠标放置到目标元素上时显示popover，可是无法实现当鼠标移动到popover上时不隐藏popover，在网上找了下只找到一篇文章（链接），不好的是需要修改bootstrap的源代码，这不是我想要的，只好另寻它路。后来想到可以在hide.bs.popov...
bootstrap tooltip不起作用
lfz95的专栏
06-14 5096
我这对bootstrap不熟的菜鸟，在使用tooltip的时候，没用出现想要的效果。相关的资源都引进来了的。 最后只好在出现把bootstrap的文档仔细看一遍，才发现自己错好low。 文中如下： 提示工具（Tooltip）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页
popover trigger : 'click' 点击弹出框外侧如何关闭弹出框
最新发布
07-12
要在单击 Bootstrap popover 外部关闭弹出框，你可以使用一些 JavaScript 代码来实现。以下是一种方法： 首先，使用 JavaScript 选项来初始化 popover，并设置 `trigger` 属性为 `'click'`，以便通过单击目标元素来触发 popover 的显示。例如： ```html <button type="button" class="btn btn-secondary" id="myButton" data-toggle="popover" data-content="Popover content" data-trigger="click">弹出框</button> <script> $(document).ready(function() { $('#myButton').popover({ trigger: 'click', content: 'Popover content' }); }); </script> ``` 接下来，我们需要添加一些 JavaScript 代码来处理单击页面其他区域时关闭 popover。这可以通过监听整个文档的点击事件，并检查点击事件发生的位置来实现。例如： ```html <script> $(document).ready(function() { $('#myButton').popover({ trigger: 'click', content: 'Popover content' }); $(document).on('click', function(event) { var $target = $(event.target); if (!$target.closest('#myButton').length && $('.popover').is(':visible')) { $('#myButton').popover('hide'); } }); }); </script> ``` 以上代码会在文档的点击事件中检查点击的目标元素是否是 `#myButton`，以及当前是否有 popover 正在显示。如果点击的是其他区域且 popover 正在显示，则通过调用 `popover('hide')` 方法来关闭 popover。 通过这种方式，你可以实现在单击 popover 外部区域时关闭弹出框。你可以根据需要进行修改和调整，以满足你的具体需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值