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


Posted in Javascript onDecember 02, 2016

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

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

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

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

<a href="" data-toggle="modal" onclick="prom('{{$.Category.Id}}')">添加同级</a> 

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

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

<script type="text/javascript"> 
 
//添加同级 
 function prom(id) { 
 $('#myModal').modal('show'); 
 $('#myModal').on('hide.bs.modal', function () { 
 var radio =$("input[type='radio']:checked").val(); 
 alert("您选择的是:" + radio + "。抱歉!添加功能暂时不提供。"); 
 }); 
 // if (cname) 
 // { 
 // $.ajax({ 
 // type:"post", 
 // 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', function () { 
第二步,点击模态框的确认如何做呢?我这个方法很笨。下面是模态框的按钮,我用取消代替确定。

<div class="modal-footer"> 
 <button type="button" class="btn btn-default" data-dismiss="modal">确定</button> 
 <!-- <button type="button" class="btn btn-primary">Save changes</button> --> 
</div>

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

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

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

代码:

<button type="button" class="btn btn-primary " data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal...

热心网友给出的答案:

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

小编有点晕,不知大家明白了吗?

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

提供一个小例子说明。

<button class="btn btn-primary btn-lg" type="button" data-toggle="modal"data-target="#myModal">
 Launch demo modal
 </button>

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

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

If using javascript then:

$('#myModal').modal({
 backdrop: 'static',
 keyboard: false
})
and if HTML:

<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">

状况五:bootstrap modal 模态框弹出瞬间消失问题的解决方法

问题:

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

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
 String path = request.getContextPath();
 String basePath = request.getScheme() + "://"
 + request.getServerName() + ":" + request.getServerPort()
 + path + "/";
%>
 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Index</title>
 
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet">
 
<style type="text/css">
body {
 padding-top: 50px;
}
.starter-template {
 padding: 40px 15px;
 text-align: center;
}
</style>
 
</head>
<body>
 
 
 <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
 <div class="container">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="#">Project name</a>
 </div>
 <div class="collapse navbar-collapse">
 <ul class="nav navbar-nav">
 <li class="active"><a href="#home">Home</a></li>
 <li><a href="#about">About</a></li>
 <li><a href="#info">Information</a></li>
 <li><a href="#contact">Contact</a></li>
 </ul>
 </div>
 </div>
 </div>
 
 <div class="container">
 
 <!-- Button trigger modal -->
 <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
 Launch demo modal
 </button>
 
 <!-- Modal -->
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
 <h4 class="modal-title" id="myModalLabel">Modal title</h4>
 </div>
 <div class="modal-body">
 ...
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 <button type="button" class="btn btn-primary">Save changes</button>
 </div>
 </div>
 </div>
 </div>
 
 </div>
 
 
 
 <script src="jquery/jquery-1.11.1.js"></script>
 <script src="Bootstrap/js/bootstrap.js"></script>
 <script src="Bootstrap/js/transition.js"></script>
 <script src="Bootstrap/js/modal.js"></script>
</body>
</html>

就这样一瞬间就消失了

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

网友1:去掉引用modal.js试试?

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

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

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript和jquery修改a标签的href属性
Dec 16 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
使用travis-ci如何持续部署node.js应用详解
Jul 30 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
JS实现瀑布流布局
Oct 21 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
前端js中的事件循环eventloop机制详解
May 15 Javascript
layui表格内容溢出的解决方法
Sep 06 Javascript
ElementUI之Message功能拓展详解
Oct 18 Javascript
javascript实现获取中文汉字拼音首字母
May 19 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 Javascript
Vue实现穿梭框效果
Sep 30 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 #Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 #Javascript
vue.js入门(3)——详解组件通信
Dec 02 #Javascript
javascript实现鼠标点击页面 移动DIV
Dec 02 #Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 #Javascript
bootstrap使用validate实现简单校验功能
Dec 02 #Javascript
在网页中插入百度地图的步骤详解
Dec 02 #Javascript
You might like
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
深入了解js原型模式
2019/05/30 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
Vue Elenent实现表格相同数据列合并
2020/11/30 Vue.js
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
python实现剪切功能
2019/01/23 Python
浅谈python标准库--functools.partial
2019/03/13 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
python 实现性别识别
2020/11/21 Python
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
农救科工作职责
2013/11/27 职场文书
师德个人剖析材料
2014/02/02 职场文书
承诺书模板
2014/08/30 职场文书
上级领导检查欢迎词
2015/09/30 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP