微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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+".)");
// }
// });
// }
}

这里的坑: 第二步,点击模态框的确认如何做呢?我这个方法很笨。下面是模态框的按钮,我用取消代替确定。

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

状况二:

代码:

代码如下:

】的另一种解决方

提供一个小例子说明。

rush:xhtml;">

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

状况四:

这是网友使用bootstrap总结出来的经验不让modal框消失的方法

rush:xhtml;"> 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的时候,照着官网的例子Copy了代码,在自己的页面运行的时候窗口弹出,但一瞬间就消失。在网上查了很久也没个答案,我是新手,在此请教在线各位。

<% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %>

<!DOCTYPE html>
<html lang="zh-cn">

Index

<link href="Bootstrap/css/bootstrap.css" rel="stylesheet">

<style type="text/css">
body {
padding-top: 50px;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}

<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 class="icon-bar">
<span class="icon-bar">
<span class="icon-bar">
<span class="icon-bar">

<div class="container">

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo 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 class="sr-only">Close
<h4 class="modal-title" id="myModalLabel">Modal title

<script src="jquery/jquery-1.11.1.js">
<script src="Bootstrap/js/bootstrap.js">
<script src="Bootstrap/js/transition.js">
<script src="Bootstrap/js/modal.js">

就这样一瞬间就消失了

网友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个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

bootstrap

相关推荐