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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
简单介绍JavaScript的变量和数据类型
Jun 03 Javascript
JavaScript运动减速效果实例分析
Aug 04 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 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调用MySQL的存储过程的实现代码
2008/08/12 PHP
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
直接在JS里创建JSON数据然后遍历使用
2014/07/25 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
JS实现可关闭的对联广告效果代码
2015/09/14 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
js实现tab切换效果
2017/02/16 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
python网络爬虫采集联想词示例
2014/02/11 Python
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
Python何时应该使用Lambda函数
2019/07/02 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
德国网上药房:Apotal
2017/04/04 全球购物
日语专业毕业生求职信
2013/12/04 职场文书
教学实习自我评价
2014/01/28 职场文书
园艺师求职信
2014/03/10 职场文书
项目建议书怎么写
2014/05/15 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
中级会计大学生职业生涯规划书
2014/09/16 职场文书
2015年财政所工作总结
2015/04/25 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL
Python中的datetime包与time包包和模块详情
2022/02/28 Python
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python
Go语言编译原理之源码调试
2022/08/05 Golang
table不让td文字溢出操作方法
2022/12/24 HTML / CSS