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

2024-12-01 16:59:17

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

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

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

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

{{$.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中的模态框插件，点击遮盖层，模态框不消失，怎么让消失

代码：

代码如下:

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

热心网友给出的答案：

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

状况三：其实这个是状况二引发的关于【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>

就这样一瞬间就消失了

网友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实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

bootstrap模态框实现拖拽效果

本文实例为大家分享了bootstrap模态框实现拖拽效果,供大家参考,具体内容如下项目中用的有点乱,jquery和angularjs一起搞,有些插件用的jquery版本的,有的插件用的ng版本的.搞到现在测试了一轮又一轮,发现modal模态框有限bug,因为层级的问题,modal框会被左侧菜单遮挡,需求就改成将modal框改成可以拖动的. 网上搜了搜,找到个blog发现基本功能是可用的.但是效果不太友好.问题有以下两个拖动时候背后文字会被选中,很难看 modal模态框会被拖出边框以外,很难看
bootstrap模态框跳转到当前模板页面框消失了而背景存在问题的解决方法

这是最近在做个人播客系统出现的一个问题, 场景如下 : 图中我点击删除按钮之后, 弹出一个模态框让我选择是回首页还是, 上一页, 下一页首页没什么好说的了, 就是直接跳转, 没什么问题上一页, 下一页却是跳转到上一篇或者下一篇, 所有的"文章"都是用的是同一个html模板, 所以页面没有重新加载于是就出现了上面的问题, 模态框消失了, 但是背景却没有消失对于这个问题, 我在网上找了好一阵子, 但是貌似并没有相关的问题 1 所以之前我本来是想将这个问题简单化, 直接"
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码

模态框嵌套在开发中,遇到需要通过点击事件触发第一个模态框,触发后通过事件唤起第二个模态框,并且通过事件触发第三个模态框:即模态框嵌套. 模态框嵌套需要用一个模态框包裹所涉及嵌套的模态框,从而点击触发模态框不会乱掉. HTML代码如下:  <div class="modal fade" id="outermost" tabindex="-1" role="dialog" ari
浅析BootStrap中Modal（模态框）使用心得

BootStrap中Modal(模态框)描述 Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的.它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能.您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件). 一.modal使用: 1.1.登录bootstrap官网,点击下载Bootstrap 1.2.导入对应的样式文件css 1.3.导入对应的js,需要导入bootstrap.js或者bootstrap.min.j
bootstrap 模态框（modal）实现水平垂直居中显示

众所周知,bootstrap是一款非常实用的CSS框架(主要用于样式的快速搭建),由于其简洁,美观,快捷,响应式等特点备受大家喜欢,但是其本身也是存在很多bug,当应对与具体的业务逻辑的时候往往达不到细节要求,比如今天我要谈的bootstrap的模态框,其默认是显示距离顶端30px,左右居中. 怎么让其在垂直方向也居中呢? 大家可能想加一个CSS样式,让其距离顶部距离变长,实践是检验真理的唯一标准,当你去试过会发现很多问题,在不修改源码的前提下修改插件并没有自由配置的样式一直是前端人员头疼的事情
BootStrap 模态框实现刷新网页并关闭功能

方法与实现 hide.bs.modal,当调用 hide 实例方法时触发. $('#identifier').on('hide.bs.modal', function () { // 执行一些动作... }) hidden.bs.modal,当模态框完全对用户隐藏时触发. $('#identifier').on('hidden.bs.modal', function () { // 执行一些动作... }) 源码示例 $('#confirmRevokeOrder').on('hidden.bs.
bootstrap模态框消失问题的解决方法

小编主要从网上整理了网友提出来的关于bootstrap模态框消失的不同问题,希望对大家有帮助. 状况一:bootstrap模态框瞬间消失解决 bootstrap模态框挺好,但这方面的例子很少,都是官方的代码,网上没有一点新的东西.比如,save changes,即点击确认后如何处理?没有例子.只有取消close的功能.我的需求是这样,点击一个链接,传一个id,打开模态框,进行输入.单选.列表选择等,点模态框确认,然后连同刚才的id.模态框中的各种值,一起提交到后台处理. 第一步:用链接传id并打
BootStrap模态框不垂直居中的解决方法

本文实例为大家分享了BootStrap模态框不垂直居中的解决方法,供大家参考,具体内容如下解决问题:BootStrap自带的模态框不垂直居中解决方案:调用BootStrap为我们提供的方法$('.modal').on('show.bs.modal', function(){}); 在模态框显示之前我们用JS修改他的Top值, 具体代码如下: /** * 垂直居中模态框 **/ function centerModals() { $('.modal').each(function(i) { v
解决bootstrap模态框数据缓存的问题方法

问题背景第一步进行新增验证第二步进行修改模态框验证信息没有消除且表单数据被缓存模态框代码:新增修改共用一个模态框  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法

最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的一个编辑框提供了自动完成功能,用jQuery UI Autocomplete来实现. 因为我是WEB前端小白,遇到一个问题很久也没解决掉,所以特简单记录一下,供以后查阅. 问题:不使用模态窗的时候,autocomplete可以很好的工作,使用模态窗时弹出的选择菜单会被模态窗遮挡. 解决过程: 首先查到的解决办法是在*autocomplete.css中找到.ui-autocomplete伪类,添
BootStrap模态框和select2合用时input无法获取焦点的解决方法

在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 解决方法: 1. 把页面中的 tabindex="-1" 删掉(测试成功): <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myMod
Bootstrap模态框调用功能实现方法

近在做一个项目时需要在页面中嵌入弹出窗口,用来展示表单信息.其实这种弹出窗口有很多jquery插件都可以实现,我这边前端都是用Bootstrap的,正好Bootstrap有模态框这个功能,这下就可以直接拿它实现了. 实现步骤如下: 在前端页面引入bootstrap相关的css和js文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.mi
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法

当在bootstrap的modal中使用ckeditor时,使用ckeditor中带弹框的功能时无法输入问题. 解决方法:在jquery和bootstrap加载之后引入fix的js,js内容: var $modalElement = this.$element; $(document).on('focusin.modal', function (e) { var $parent = $(e.target.parentNode); if ($modalElement[0] !== e.target
快速解决select2在bootstrap模态框中下拉框隐藏的问题

修改select2-container--open类 .select2-container--open { z-index: 9999999 !important; } 以上这篇快速解决select2在bootstrap模态框中下拉框隐藏的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
bootstrap模态框关闭后清除模态框的数据方法

如下所示: $('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); }); 以上这篇bootstrap模态框关闭后清除模态框的数据方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

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

相关推荐

随机推荐