bootstrap 模态窗口点击图层不关闭写法
2015-04-21 14:52
495 查看
<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!--适应手机显示-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
</style>
<script type="text/javascript" src="lib/bootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="lib/bootstrap/utilLib/bootstrap.min.css" type="text/css" media="screen" />
<script>
$(document).ready(function () {
$("#apply").click(function () {
$.ajax({url:'填写你的请求地址',
type : 'post',
data : $("#form1").serialize(),//取得所有表单内容
dataType : 'json',
success : function(data) {
if (data.code == 100) {
$("#title").html("成功");
}
else {
$("#title").html("失败");
}
$("#msg").html(data.msg);
$("#submit").click();//触发模态窗口
}
});
});
});
</script>
</head>
<body style="padding: 10% 5% 5% 5%">
<center>
<s:form id="form1" action="apply_secretkey" method="post" namespace="/payment/appstore">
<table width="100%" border="0">
<tr>
<td>
<div>
<!--大字体-->
<input type="text" name="tel" placeholder="Number" class="input-lg form-control"/><br>
</div>
<br>
</td>
</tr>
<tr>
<td width="100%">
<div>
<!--大字体-->
<button type="button" id="apply" class="btn btn-block btn-lg
btn-info">点击</button>
</div>
</td>
</tr>
</table>
</s:form>
</center>
<!-- 按钮触发模态框 -->
<div style="display: none">
<!--指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。-->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" id="submit"
data-backdrop="static"></button>
</div>
<!-- 模态框（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" aria-hidden="true">×</button>
<em id="title"> </em>
</div>
<div class="modal-body">
<em id="msg"></em>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</body>
</html>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!--适应手机显示-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
</style>
<script type="text/javascript" src="lib/bootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="lib/bootstrap/utilLib/bootstrap.min.css" type="text/css" media="screen" />
<script>
$(document).ready(function () {
$("#apply").click(function () {
$.ajax({url:'填写你的请求地址',
type : 'post',
data : $("#form1").serialize(),//取得所有表单内容
dataType : 'json',
success : function(data) {
if (data.code == 100) {
$("#title").html("成功");
}
else {
$("#title").html("失败");
}
$("#msg").html(data.msg);
$("#submit").click();//触发模态窗口
}
});
});
});
</script>
</head>
<body style="padding: 10% 5% 5% 5%">
<center>
<s:form id="form1" action="apply_secretkey" method="post" namespace="/payment/appstore">
<table width="100%" border="0">
<tr>
<td>
<div>
<!--大字体-->
<input type="text" name="tel" placeholder="Number" class="input-lg form-control"/><br>
</div>
<br>
</td>
</tr>
<tr>
<td width="100%">
<div>
<!--大字体-->
<button type="button" id="apply" class="btn btn-block btn-lg
btn-info">点击</button>
</div>
</td>
</tr>
</table>
</s:form>
</center>
<!-- 按钮触发模态框 -->
<div style="display: none">
<!--指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。-->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" id="submit"
data-backdrop="static"></button>
</div>
<!-- 模态框（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" aria-hidden="true">×</button>
<em id="title"> </em>
</div>
<div class="modal-body">
<em id="msg"></em>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 解决Bootstrap模态窗口Modal中使用Kindeditor或UEditor编辑器 点击关闭弹窗 出现第二次无法加载的问题
- BootStrap模态框，点击保存后实现模态框自动关闭的思路
- Bootstrap 模态框自定义点击和关闭事件详解
- BootStrap 模态框禁用空白处点击关闭
- Angular4_Bootstrap 模态框避免点击背景处关闭（ng-bootstrap）
- BootStrap 3 模态框禁用空白处点击关闭
- BootStrap 模态框禁用空白处点击关闭
- Bootstrap 模态框在用户点击背景空白处时会自动关闭
- 阻止Bootstrap 模态框点击背景空白处自动关闭
- bootstrap 模态框怎么去设置点击保存后关闭模态框
- BootStrap 模态框禁用空白处点击关闭
- Bootstrap 模态框 禁止点击空白关闭模态框事件
- Bootstrap 模态框在点击页面空白处关闭
- bootstrap模态框点击关闭问题
- bootstrap 模态框禁用空白处点击关闭
- BootStrap 模态框禁用空白处点击关闭
- BootStrap 模态框禁用空白处点击关闭
- BootStrap 模态框禁用空白处点击关闭
- Bootstrap 模态框避免点击背景处关闭
- bootstrap禁用点击空白处关闭模态框