小编主要从网上整理了网友提出来的关于bootstrap模态框消失的不同问题，希望对大家有帮助。
状况一：bootstrap模态框瞬间消失解决
bootstrap模态框挺好，但这方面的例子很少，都是官方的代码，网上没有一点新的东西。比如，save changes，即点击确认后如何处理？没有例子。只有取消close的功能。我的需求是这样，点击一个链接，传一个id，打开模态框，进行输入、单选、列表选择等，点模态框确认，然后连同刚才的id、模态框中的各种值，一起提交到后台处理。
第一步：用链接传id并打开模态框。
<a href="" data-toggle="modal">添加同级</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> <button type="button" data-dismiss="modal">确定</button> <!-- <button type="button">Save changes</button> --> </div>
在点击确定（其实是关闭）后，触发了
$('#myModal').on('hide.bs.modal', function () {
开始执行里面的代码了。
状况二：bootstrap中的模态框插件，点击遮盖层，模态框不消失，怎么让消失
代码：
复制代码 代码如下:
<button type="button" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div tabindex="-1" role="dialog" aria-labelledby="myModal...
热心网友给出的答案：
小编有点晕，不知大家明白了吗？
状况三：其实这个是状况二引发的关于【bootstrap modal 模态框弹出瞬间消失的问题】的另一种解决方式
提供一个小例子说明。
<button 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 + "https://www.jb51.net/"; %> <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1"> <title>Index</title> <link href="https://www.jb51.net/Bootstrap/css/bootstrap.css"> <style type="text/css"> body { padding-top: 50px; } .starter-template { padding: 40px 15px; text-align: center; } </style> </head> <body> <div role="navigation"> <div> <div> <button type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> <span></span> </button> <a href="#">Project name</a> </div> <div> <ul> <li><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> <!-- Button trigger modal --> <button data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal"><span aria-hidden="true">×</span><span>Close</span></button> <h4>Modal title</h4> </div> <div> ... </div> <div> <button type="button" data-dismiss="modal">Close</button> <button type="button">Save changes</button> </div> </div> </div> </div> </div> <script src="https://www.jb51.net/jquery/jquery-1.11.1.js"></script> <script src="https://www.jb51.net/Bootstrap/js/bootstrap.js"></script> <script src="https://www.jb51.net/Bootstrap/js/transition.js"></script> <script src="https://www.jb51.net/Bootstrap/js/modal.js"></script> </body> </html>
就这样一瞬间就消失了
网友1：去掉引用modal.js试试？