使用单页应用时,模态框只能在主页正常显示,无法在.load加载的其他页面显示。


<div class="center-container">
<div id="panel" class="col-md-10 col-sm-9" >
<!--加载-->
</div>
</div>
<div class="modal fade" id="global_info_modal" table-index="-1" role="dialog"
aria-labelledby="myModalLabel" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">信息</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4 col-sm-4"></div>
<div class="col-md-4 col-sm-4">
<div id="info_success" class=" hide" style="text-align: center;">
<img src="/images/success.png" alt=""
style="width: 100px; height: 100px;">
</div>
<div id="info_error" style="text-align: center;">
<img src="/images/error.png" alt=""
style="width: 100px; height: 100px;">
</div>
</div>
<div class="col-md-4 col-sm-4"></div>
</div>
<div class="row" style="margin-top: 10px">
<div class="col-md-3"></div>
<div class="col-md-6" style="text-align: center;">
<h4 id="info_summary"></h4>
</div>
<div class="col-md-3"></div>
</div>
<div class="row" style="margin-top: 10px">
<div class="col-md-3"></div>
<div class="col-md-6" style="text-align: center;">
<p id='info_content'></p>
</div>
<div class="col-md-3"></div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">
<span> 关闭 </span>
</button>
</div>
</div>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="panel panel-default">
<ol class="breadcrumb">
<li>失物添加</li>
</ol>
<div class="panel-body">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="row">
<div class="col-md-1 col-sm-1"></div>
<div class="col-md-10 col-sm-11">
<form action="" class="form-inline">
<div class="form-group">
<label class="form-label">用户ID:</label>
<span id="userId">[[${session.userInfo.userId}]]</span>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="row">
<div class="col-md-1 col-sm-1"></div>
<div class="col-md-10 col-sm-11">
<form action="" class="form-inline">
<div class="form-group">
<label class="form-label">失物:</label>
<input type="text" class="form-control" id="goodsName" name="goodsName"placeholder="请输入名称">
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 30px">
<div class="col-md-6 col-sm-6">
<div class="row">
<div class="col-md-1 col-sm-1"></div>
<div class="col-md-10 col-sm-11">
<form action="" class="form-inline">
<div class="form-group">
<label class="form-label">失物类型:</label>
<select name="goodsTypeId" id="goodsTypeId" class="form-control">
<option value="1002">证件</option>
<option value="1003">钱物</option>
<option value="1004">学习资料</option>
<option value="1005">电子产品</option>
<option value="1001">个人物品</option>
</select>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top:30px">
<div class="col-md-6 col-sm-6">
<div class="row">
<div class="col-md-1 col-sm-1"></div>
<div class="col-md-10 col-sm-11">
<form action="" class="form-inline">
<div class="form-group">
<label class="control-label">发现地点:</label>
<input type="text" class="form-control" id="goodsPlace" name="goodsPlace">
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top:30px">
<div class="col-md-6 col-sm-6">
<div class="row">
<div class="col-md-1 col-sm-1"></div>
<div class="col-md-10 col-sm-11">
<form action="" class="form-inline">
<div class="form-group">
<label class="control-label">图片上传:</label>
<input type="file" class="form-control" id="imgURL" name="imgURL">
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top:80px">
<div class="col-md-6 col-sm-6">
</div>
</div>
<div class="row" style="margin-top:80px">
<div class="col-md-6 col-sm-6">
</div>
</div>
<div class="row" style="margin-top:80px">
<div class="col-md-6 col-sm-6">
</div>
</div>
</div>
<div class="panel-footer">
<div style="text-align:right">
<button class="btn btn-success" id="submit">登记失物</button>
</div>
</div>
</div>
</body>
function showMsg(type, msg, append) {
$('#info_success').removeClass("hide");
$('#info_error').removeClass("hide");
if (type == "success") {
$('#info_error').addClass("hide");
} else if (type == "error") {
$('#info_success').addClass("hide");
}
$('#info_summary').text(msg);
$('#info_content').text(append);
$('#global_info_modal').modal("show");
}
function stockInOption(){
$('#submit').click(function(){
// 获取 select 元素
let selectElement = document.getElementById('goodsTypeId');
let selectedIndex = selectElement.selectedIndex;
const goodsData = new FormData();
let goodsTypeId=selectElement.options[selectedIndex].value;
let goodsName=$('#goodsName').val();
let goodsPlace=$('#goodsPlace').val();
goodsData.append("imgURL", document.getElementById("imgURL").files[0]);
goodsData.append("goodsName",goodsName);
goodsData.append("goodsTypeId",goodsTypeId);
goodsData.append("goodsPlace",goodsPlace);
$.ajax({
type : 'POST',
url : '/addGoods',
dataType: "json",
data : goodsData,
//告知Jquery不处理发送数据,用于对data参数序列化
processData: false,
//告知JQuery不要设置Content-Type请求头
contentType:false,
success : function(response){
var msg;
var type;
var append = '';
if(response.result == "success"){
type = 'success';
msg = '添加成功';
}else{
type = 'error';
msg = '添加失败'
}
showMsg(type, msg, append);
//inputReset();
},
error : function(xhr, textStatus, errorThrown){
// handler error
handleAjaxError(xhr.status);
}
})
});
}