<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Bootstrap -->
<link href="${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/main.css">
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/Buttons/2.0.0/css/buttons.css">
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet" type="text/css">
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.js" type="application/javascript"></script>
</head>
<body>
<div class="container-fluid">
<div class="row" style="background-color: -sharp000000;height: 60px;">
<span style="color: -sharp46b8da;"></span>
<span style="color: -sharp46b8da;">:</span>
</div>
<div class="row" >
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li id="addFoodModalBtn" class="button button-glow button-border button-rounded button-primary pull-right"></li>
</ul>
</div>
</div>
</div>
</body>
<!-- Modal -->
<div class="modal fade" id="applyAddFoodModal" 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>
<h4 class="modal-title">
</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="userInfoForm" onsubmit="return false" method="post">
<fieldset>
<div class="control-group">
<!-- Text input-->
<label class="control-label">:</label>
<div class="controls">
<input type="text" placeholder="" class="input-xlarge" name="userNickName">
</div>
</div>
<div class="control-group">
<!-- Text input-->
<label class="control-label">:</label>
<div class="controls">
<input type="text" class="input-xlarge" name="alipayUserName">
</div>
</div>
<div class="control-group">
<!-- Text input-->
<div class="col-md-12">
<label class="control-label">:</label>
<img src="" id="alipayImg">
</div>
<div class="controls">
<input type="hidden" name="alipayImgUrl"
id="alipayImgUrlInput">
</div>
</div>
</fieldset>
<button class="button button-glow button-border button-rounded button-primary pull-right"
id="submitFoodInfoBtn" data-dismiss="modal">
</button>
</form>
<hr style="margin-top: 20px">
<div class="row">
<div class="col-md-2">
<span> :</span>
</div>
<form enctype="multipart/form-data">
<div class="form-group">
<input id="foodImgUrlFile" type="file" class="file"
data-overwrite-initial="false" data-min-file-count="1" name="file">
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button class="button button-glow button-border button-rounded button-primary pull-right"
data-dismiss="modal">
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--end panel-->
<!-- Modal -->
<div class="modal fade" id="responseMessageModal" 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>
<h4 class="modal-title" id="myModalLabel">
</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<span id="modalMsgSpan"></span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script type="application/javascript">
$(function () {
//
$("-sharpaddFoodModalBtn").bind("click", function () {
$("-sharpapplyAddFoodModal").modal("show");
})
$("-sharpsubmitFoodInfoBtn").bind("click", function () {
$.ajax({
//
type: "POST",//
dataType: "json",//
url: "${pageContext.request.contextPath}/account/user/editInfo",//url
data: $("-sharpuserInfoForm").serialize(),
success: function (data) {
$("-sharpresponseMessageModal").modal();
$("-sharpmodalMsgSpan").text(data.msg);
},
error: function () {
alert("");
}
});
});
})
</script>
</html>
* * 1, the code is shown by clicking the button modal dialog box.
2, if the code is put into the html file to run and click button to pop up the modal dialog box, the function is normal
3, if the code is put into the jsp file, and then access the jsp file, click the button but can not see the modal dialog box, can only see the mask layer,
through the chrome check found that the dialog box does exist but invisible, that is, transparent, this is why? * *
4 you can copy and paste the code into this online running website to test the normal html running effect, http://www.5axxw.com/tools/we.
.