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 相关文章推荐
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
Jul 01 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
PHP捕捉异常中断的方法
Oct 24 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 Javascript
vue绑定class的三种方法
Dec 24 Vue.js
谈谈因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
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
php下的权限算法的实现
2007/04/28 PHP
PHP 图片上传代码
2011/09/13 PHP
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
php实现的双向队列类实例
2014/09/24 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
python实现socket端口重定向示例
2014/02/10 Python
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
python中私有函数调用方法解密
2016/04/29 Python
简单谈谈Python流程控制语句
2016/12/04 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
使用Python实现画一个中国地图
2019/11/23 Python
python环境下安装opencv库的方法
2020/03/05 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
绘画设计学生的个人自我评价
2013/09/20 职场文书
暑期社会实践方案
2014/02/05 职场文书
大学生安全责任书
2014/07/25 职场文书
教师党员个人总结
2015/02/10 职场文书
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python