bootstrap模态框 闪退问题

最新推荐文章于 2022-02-16 17:41:36 发布
原创 最新推荐文章于 2022-02-16 17:41:36 发布 · 1.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bootstrap #layui

本文记录了解决点击按钮后模态框仅短暂闪现的问题。通过逐步排除干扰代码，发现移除form元素后模态框能正常显示。具体原因尚不明确，欢迎读者补充。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天要实现一个点击按钮，弹出一个模态框的需求（本人java,对前端不是很熟），按照之前所做的，引入jquery.min.js 和bootstrap.min.js文件（ps:之前都是这么做的），

如上图，点击button，弹出模态框，让人意外的是只是闪了一下，速度过快的话基本上是看不到闪的，网上查了好多资料，基本都说是bootstrap.min.js与modal.js文件冲突，但我并没有引入modal.js文件。

于是将干扰的代码一点点删除，发现把form去掉以后，模态框出来了，

原因其实不是很明白，只是记录下解决方式，希望可以帮到大家！如果有知道原因的也可以评论告知，多谢！

BootStrap模态框闪退问题实例代码详解
10-17
主要介绍了BootStrap模态框闪退问题实例代码详解,需要的朋友可以参考下
BootStrap模态框闪退
zhuyuchao11的博客
11-18 5898
解决方法： 1、bootstrap.min.js与modal.js不能混用。 2、触发模态框的组件需要设置 data-toggle=“modal”   3、设置 data-target="#myModal"或href="#myModal"或者写javascript 函数响应点击事件打开模态框，不能同时使用 4、换一个高版本的bootstrap.min.js
Boostrap 模态框闪退问题
不止于技术
08-03 4402
今天在一个使用BootStrap的项目中整合了Flai-UI使用BootStrap的模态框时，总是会出现模态框闪退问题。 出现这个问题的一般情况是JS文件发生冲突。为此我逐一排查了我所引入的js文件，最后发现引入的bootstrap 的js文件和flat-ui的js文件发生冲突。因为flat-ui的js文件对BootStrap的模态框进行了重写。所以我剔除了BootStrap的js文件。 闪
bootstrap-modal 模态框一闪而过
qq_37260235的博客
10-23 3298
网上考证后，了解到有可能是 1.bootstrap.min.js与modal.js不能混用 2.换一个高版本的bootstrap.min.js 3.type=“button” 我是加入这个字段就可以触发了， <button class="btn btn-primary btn-sm" type="button" onclick="javascript:$('#...
bootstrap模态框闪退，原因竟是......
RuaGuGuGu的博客
03-27 1075
bootstrap模态框闪退神坑 如果你的触发器是一个button，而且这个button在一个form中，你一定要手动指定button的type=“button”，否则默认是"submit"，点一下你的表单就提交了，页面刷新，你的模态框自然就闪退了。 ...
BootStrap 模态框实现刷新网页并关闭功能
08-31
Bootstrap模态框（Modal）是前端开发中常用的一种交互组件，它允许在当前...希望这篇文章对你在使用Bootstrap模态框时有所帮助，如果你在实践中遇到任何问题，欢迎留言提问，我们将尽力为你解答。感谢你对我们的支持！
Bootstrap 模态框（Modal）带参数传值实例
08-29
Bootstrap模态框（Modal）是Web开发中常用的一种交互元素，它允许用户在不离开当前页面的情况下处理额外信息或执行操作。在实际应用中，我们经常需要将数据从父页面传递到模态框中，以确保操作的针对性和准确性。本...
bootstrap模态框关闭后清除模态框的数据方法
10-18
Bootstrap是一种流行的前端框架，它简化了网页设计和开发的...这篇文章所分享的方法对于处理Bootstrap模态框关闭后的数据清理问题提供了明确的指导，对于前端开发人员来说具有很好的参考价值，并期望得到大家的支持。
使用bootstrap的模态框时出现闪退
zrcshendustudy的博客
04-05 2344
出现模态框闪退，如何才能让它恢复为这样子呢》要去控制bootstrap的导入顺序。先把bootstrap的包先导入先，再导入其他js，css包。按顺序来
Bootstrap 模态框自定义点击和关闭事件详解
10-18
今天小编就为大家分享一篇Bootstrap 模态框自定义点击和关闭事件详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
bootstrap点击按钮后只出现遮罩层模态框一闪而过
雪糕的博客
05-21 599
主要原因是我们把模态框放到了form中 提交表单刷新了页面 所以形成了一闪而过的效果 主要的解决方案 给按钮的type=“button" 改成这个 或者给form表单加一个οnsubmit="return false"
boostrap模态框闪退问题
weixin_43821620的博客
10-21 459
bootstrap模态框（modal）闪退问题 问题描述：按bootstrap官方文档添加modal静态代码后，点击模态框出发按钮后模态框弹出后立即消失。 **解决：**删除bootstarp.min.js就可以了，可能是因为adminlte.js对bootstrap的模态框进行了重写，引入了两个重复js文件导致模态框闪退 ...
bootstrap modal 一闪
ayearlater的专栏
01-05 5521
原因可能是因为bootstrap.min.js（bootstrap.js） 和modal.js重复引用导致的，而且重复引用还会引致bootstrap的js事件失效。
后台使用bootstrap框架点击弹窗modal时打开闪退解决方案
徊忆羽菲
10-08 1650
后台使用bootstrap框架点击弹窗modal时打开闪退第一种闪退情况第二种闪退情况 第一种闪退情况 今天在用到bootstrap的modal时，发现打开的弹窗会闪退， 大多数原因是因为bootstrap.js和modal.js 混用 经过排查，我代码中没有使用modal.js ，后来才注意到把bootstrap.js 和 bootstrap.min.js 重复引入了。 删除了bootstrap.min.js 后，问题解决。 第二种闪退情况 一点击触发模态框显示的按钮，页面就是重新加载一下，模态框也
bootstrap模态框一闪而过和两个模态框相互影响的问题
Bruce_Json的博客
08-17 2309
在使用Ajax获取数据传输到模态框到时候，数据传输过来了，模态框一闪而过，这个小问题卡了一下午，最后网上查好多文章，最后发现是一个特别容易忽略的小问题 错误代码： <button class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal" onclick="toUpdate(${c.id})"&g...
BootStrap模态框闪退问题
江西师范大学-20届-吴悠
12-09 1937
BootStrap模态框闪退问题 模态框闪退到你还看不到模态框的内容呢，就屏幕灰了一下就是 代码如下 <!--搜索注册条--> <div class="container-fluid"> <form class="navbar-form navbar-center" role="Search"> <div class=&qu
bootStrap中的模态框与点击方法共存闪退问题
weixin_62372517的博客
02-16 678
bootstrap 模态框闪退
[经典bug]弹框关闭按钮点击后程序闪退
LJLLJL20020628的博客
05-15 189
问题背景： 业务上遇到一个很诡异的问题：弹框界面上有一个关闭按钮，切换后台再返回后，点击关闭按钮，部分机型上会直接崩溃。点击手机返回键关闭界面则正常。 问题原因： 点击关闭按钮的操作属于UI线程，直接调用finish会马上销毁activity，销毁太快，系统调度出现异常。 解决方案： 将activity的finish 直接post到UI线程，可以规避问题。 转载于:https://w...
前端开发：bootstrap模态框提示弹窗优化技巧
Bootstrap模态框（Modal）是Bootstrap框架中提供的一个非常实用的组件，它允许用户在当前页面上创建一个悬浮层，这种悬浮层常用于显示额外的信息或交互式内容。当用户点击一个按钮或者其他元素时，模态框就会显示...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值