bootstrap模态框消失问题的解决方法

时间：2017.04.27 发布人：ntsy111

已解决问题

谷歌ntsy111用户在2017.04.27提交了关于“柯蓝bootstrap模态框消失问题的解决方法”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2025-04-06T10:29:46。希望大家能够帮助她。

详细问题描述及疑问：期待您的答案，不知道说什么,送你一朵小红花吧！

希望以下的回答，能够帮助你。

第1个回答

用户名：lingssi1p 时间：2017.04.28

小问答编主要从网上整理了网友提出来的关于bootstrap模态框消失的不同问题，希望对大家有帮助。

状况一：bootstrap模态框瞬间消失解决

bootstrap模态框挺好，但这方面的例子很少，都寿方的代码，网上没有一点新的东西。比如，s**echanges，即点击确认后如何处理？没有例子。只有取消close的功能。我的需求是这样，点击一个链接，传一个id，打开模态框，进行输入、单选、列表选择等，点模态框确认消酸也提越胡稳副认切自，然后连同刚才的id、模态框中的各种值，一起提交到后台处理。

第一步：用链接传id并打开模态框。

<ahref=""data-toggle去想全呢样永亮顶仅敌="modal"o帮理没定增阿识所过nclick="prom('{{$.***.Id}}')">添加同级</a>

{{$.***.Id}}是传的id值

通过js代码实现打开模态框

<scripttype然压序英="text/ja只航尽vascript">//添加同岁独积殖皮扬下节就级functionprom正仍敌到石做卫钱(id){$('#m苏故各负相燃做边哪yModal').modal('show');$('#myModal').on('hide.bs.modal',function(){varradio=$("input[type='radio']:checked").val();alert("您选择的是："+radio+"。抱歉！添加功能暂时不提供。");});//if(cname)//{//$.aj析热还均状松赶ax({//type:"po其宁案训垂顾st",//url:"/category划动露坚面银顾经杨吃安/post",//data:{pid:id,title:cname},//父级id//success:function(data,status){//alert("添加“"+data+"”成功！(status:"+status+".)");//}//});//}}

这里的坑：
$('#myModal').modal('show'依育仅定构么持线利);
如果只用这一行代码，模态到病燃如架初失劳露里框就会瞬间消失。
后面添加代码：
$('#myModal').on('hide.bs.modal',f冲unction(){
第二步，点击模态框的确认如何做呢？我这个方法很笨。下面是模态框的按钮，我用取消代替确定。

<divclass互审著决菜乙包服酸苏="modal-footer"><buttontype="button"class="btnbtn-default"data-di**iss="modal">确持孩迅定</button></div>

在点击确定（其实守闭）后，触发了
$('#myModal').on('hide.bs.modal',function(){
开始执行里面的代码了。

状况二：bootstrap中的模态框插件，点击遮盖层，模态框不消失，怎么让消失

代码：复制代码代码如下:<buttontype="button"class="btnbtn-primary"data-toggle="modal"data-target="#myModal">Launchdemomodal</button><divclass="modalfade"id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModal

热心网友给出的答案：

小编有点晕，不知大家明白了吗？

状况三：其实这个是状况二引发的关于【bootstrapmodal模态框出瞬间消失的问题】的另一种解决方式

提供一个小例子说明。

<buttonclass="btnbtn-primarybtn-lg"type="button"data-toggle="modal"data-target="#myModal">Launchdemomodal</button>

注意红字部分type="button"，在需要触发的按钮处，加入这一段就好了。

状况四：这是网友使用bootstrap总结出来的经验“不让modal框消失的方法”

Ifusingj**ascriptthen:$('#myModal').modal({backdrop:'static',keyboard:false})andifh**TML:<adata-controls-modal="your_div_id"data-backdrop="static"data-keyboard="false"href="#">

状况五：bootstrapmodal模态框出瞬间消失问题的解决方法

问题：

学习使用bootstrapmodal的时候，照着官网的例子Copy了代码，在自己的页面运行的时候窗口出，但一瞬间就消失。在网上查了很久也没个答案，我是新手，在此请教**各位。

<%@pagelanguage="j**a"import="j**a.util.*"pageEncoding="UTF-8"%><%Stringpath=request.getContextPath();StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1"><title>Index</title><linkhref="Bootstrap/css/bootstrap.css"rel="stylesheet"><styletype="text/css">body{padding-top:50px;}.starter-template{padding:40px1**x;text-align:center;}</style></head><body><divclass="n**barn**bar-inversen**bar-fixed-top"role="n**igation"><divclass="container"><divclass="n**bar-header"><buttontype="button"class="n**bar-togglecollapsed"data-toggle="collapse"data-target=".n**bar-collapse"><spanclass="sr-only">Togglen**igation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="n**bar-brand"href="#">Projectname</a></div><divclass="collapsen**bar-collapse"><ulclass="n**n**bar-n**"><liclass="active"><ahref="#home">h**ome</a></li><li><ahref="#**ut">About</a></li><li><ahref="#info">Information</a></li><li><ahref="#contact">Contact</a></li></ul></div></div></div><divclass="container"><buttonclass="btnbtn-primarybtn-lg"data-toggle="modal"data-target="#myModal">Launchdemomodal</button><divclass="modalfade"id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-di**iss="modal"><spanaria-hidden="true">×</span><spanclass="sr-only">Close</span></button><h4class="modal-title"id="myModalLabel">Modaltitle</h4></div><divclass="modal-body"></div><divclass="modal-footer"><buttontype="button"class="btnbtn-default"data-di**iss="modal">Close</button><buttontype="button"class="btnbtn-primary">S**echanges</button></div></div></div></div></div><scriptsrc="jquery/jquery-1.11.1.js"></script><scriptsrc="Bootstrap/js/bootstrap.js"></script><scriptsrc="Bootstrap/js/transition.js"></script><scriptsrc="Bootstrap/js/modal.js"></script></body></html>

就这样一瞬间就消失了

网友1：去掉引用modal.js试试？

网友2：各位，楼主的问题解决了。
我猜各位应该都是照着bootstrap官网demo在练习的，请注意，你在官网下载的bootstrap源码有两个版本，如图：

官网Demo使用的是第一个，所以如果你按照官网的Demo练习，那就应该只使用第一个，当然也可以使用第二个，但是不能混用。

网友3：今天我也遇到了，虽然是三个月的东西了。但是我还是想把正确答案贴出来，原因是：bootstrap.min.js（bootstrap.js）和modal.js重复引用，把modal.js删除掉就好了。

网友4：我也遇到类似问题，但是解决方式是删了bootstrap.min.js；js冲突问题

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。