bootstrap 模態視窗點選圖層不關閉寫法
阿新 • • 發佈：2019-01-09
<%@ 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>
<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>
<br>
</td>
</tr>
<tr>
<td width="100%">
</div>
</td>
</tr>
</table>
</s:form>
</center>
<!-- 按鈕觸發模態框 -->
</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">
<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>
<!--大字型-->
</div>
<br>
</td>
</tr>
<tr>
<td width="100%">
<div>
<!--大字型-->
</div>
</td>
</tr>
</table>
</s:form>
</center>
<!-- 按鈕觸發模態框 -->
<div style="display: none">
<!--指定一個靜態的背景，當用戶點選模態框外部時不會關閉模態框。-->
</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>