bootstrap 模态框弹出就消失了_bootstrap模态框消失问题的解决方法

这篇文章主要为大家详细整理了bootstrap模态框消失不消失各种问题的解决方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

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

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

添加同级

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

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

//添加同级

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 () {第二步，点击模态框的确认如何做呢？我这个方法很笨。下面是模态框的按钮，我用取消代替确定。

确定

在点击确定(其实是关闭)后，触发了

$('#myModal').on('hide.bs.modal', function () {开始执行里面的代码了。

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

代码：

Launch demo modal

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

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

提供一个小例子说明。

Launch demo modal

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

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

If using javascript then:

$('#myModal').modal({

backdrop: 'static',

keyboard: false

})

and if HTML:

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

问题：

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

String path = request.getContextPath();

String basePath = request.getScheme() + "://"

+ request.getServerName() + ":" + request.getServerPort()

+ path + "/";

Index

body {

padding-top: 50px;

}

.starter-template {

padding: 40px 15px;

text-align: center;

}

Toggle navigation

Project name

Home
About
Information
Contact

Launch demo modal

×Close

Modal title

...

Save changes

就这样一瞬间就消失了

网友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模态框消失问题的解决方法相关推荐

怎么查看usb读取信息_电脑弹出USB设备时提示该设备正在使用中的解决方法
转载的文章,原文: 电脑弹出USB设备时提示该设备正在使用中的解决方法-系统城www.xitongcheng.com 电脑弹出USB设备时提示该设备正在使用,虽然在正常显示时并没有程序在使用,但是确 ...
计算机管理员解除阻止程序方法,电脑安装软件时弹出系统管理员设置了系统策略,禁止进行此安装解决方法...
在安装office word的时候,无法安装成功,系统提示系统管理员设置了系统策略,禁止进行此安装.不少网友相信碰到过类似的问题,今天小编就为大家讲解下解决办法,希望对大家有所帮助. 组件服务 1.打 ...
组策略计算机用户账户控制,Win10系统总是弹出用户账户控制提示是否允许程序修改计算机的解决方法...
Win10系统总是弹出用户账户控制提示"是否允许程序修改计算机"的解决方法不少使用Win10系统的用户都会遇到这样一个问题:当我们打开程序时,系统总会弹出"你要允许以下 ...
Android 软键盘弹出时把布局顶上去，控件乱套解决方法
Android 软键盘弹出时把布局顶上去,控件乱套解决方法参考文章: (1)Android 软键盘弹出时把布局顶上去,控件乱套解决方法 (2)https://www.cnblogs.com/zhuj ...
layer弹窗弹出位置不在浏览器窗口居中的问题的解决方法
layer弹窗弹出位置不在浏览器窗口居中的问题的解决方法参考文章: (1)layer弹窗弹出位置不在浏览器窗口居中的问题的解决方法 (2)https://www.cnblogs.com/chaoyu ...
php 弹出变量,php取变量出现Notice: Undefined variable 的解决方法
Notice: Undefined variable: email in D:\PHP5\ENOTE\ADDNOTE.PHP on line 9 Notice: Undefined variable: ...
windows 总是弹出 windows installer 安装，并且关不了的解决方法
前不久不知道是对Windows做了什么操作,最近老是提示windows installer 安装,并且这个提示框一直也关不了,哈哈,可能是有强迫症,便折腾了一波,终于解决了. 我使用的是一个叫做Win ...
layerui的弹出层只显示两行英文字符不换行的解决方法
如下图展示如上图,多余的英文字符并不自动换行,放在浏览器里面按f12调试一下.找到layer/need/layer.css将第45行的增加了如下属性:word-break: break-all; 最 ...
启动Eclipse 弹出“Failed to load the JNI shared library”错误的解决方法
原因1:eclipse的版本与jre或者jdk版本不一致对策:要么两者都安装64位的,要么都安两个是32位一个是64位. 原因2:给定目录下jvm.dll不存在对策:(1)重新安装jre或者jdk ...

bootstrap 模态框弹出就消失了_bootstrap模态框消失问题的解决方法

Modal title

bootstrap 模态框弹出就消失了_bootstrap模态框消失问题的解决方法相关推荐

最新文章

热门文章