<!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" >
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<link 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: #000000;height: 60px;">
<span style="color: #46b8da;">歡迎</span>
<span style="color: #46b8da;">你好:</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>
<!-- 模態(tài)框(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">
填寫(xiě)菜品信息
</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">名稱(chēng):</label>
<div class="controls">
<input type="text" placeholder="請(qǐng)輸入菜品名稱(chēng)" class="input-xlarge" name="userNickName">
</div>
</div>
<div class="control-group">
<!-- Text input-->
<label class="control-label">價(jià)格:</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">關(guān)閉
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--end panel-->
<!-- 模態(tài)框(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">
操作結(jié)果
</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">關(guān)閉
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script type="application/javascript">
$(function () {
//
$("#addFoodModalBtn").bind("click", function () {
$("#applyAddFoodModal").modal("show");
})
$("#submitFoodInfoBtn").bind("click", function () {
$.ajax({
//幾個(gè)參數(shù)需要注意一下
type: "POST",//方法類(lèi)型
dataType: "json",//預(yù)期服務(wù)器返回的數(shù)據(jù)類(lèi)型
url: "${pageContext.request.contextPath}/account/user/editInfo",//url
data: $('#userInfoForm').serialize(),
success: function (data) {
$('#responseMessageModal').modal();
$("#modalMsgSpan").text(data.msg);
},
error: function () {
alert("異常!");
}
});
});
})
</script>
</html>
**1,代碼是 通過(guò)點(diǎn)擊button 顯模態(tài)對(duì)話框。
2,如果這個(gè)代碼放到html 文件中運(yùn)行 點(diǎn)擊button 可以彈出模態(tài)對(duì)話框 ,功能正常
3,如果這個(gè)代碼放到j(luò)sp文件中,然后訪問(wèn)jsp文件,點(diǎn)擊按鈕 卻看不到 模態(tài)對(duì)話框,只能夠看道遮罩層,
通過(guò)chrome 檢查發(fā)現(xiàn) 對(duì)話框確實(shí)存在 只不過(guò)是看不見(jiàn),也就是透明的,這個(gè)是為什么?**
4各位 可以將 代碼復(fù)制 粘貼到 這個(gè)在線運(yùn)行 網(wǎng)站測(cè)試 普通html 運(yùn)行效果,http://www.5axxw.com/tools/we...
北大青鳥(niǎo)APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景,秉承“教育改變生活”的發(fā)展理念,致力于培養(yǎng)中國(guó)IT技能型緊缺人才,是大數(shù)據(jù)專(zhuān)業(yè)的國(guó)家
北大青鳥(niǎo)中博軟件學(xué)院創(chuàng)立于2003年,作為華東區(qū)著名互聯(lián)網(wǎng)學(xué)院和江蘇省首批服務(wù)外包人才培訓(xùn)基地,中博成功培育了近30000名軟件工程師走向高薪崗位,合作企業(yè)超4
中公教育集團(tuán)創(chuàng)建于1999年,經(jīng)過(guò)二十年潛心發(fā)展,已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術(shù)與教育服務(wù)機(jī)構(gòu),發(fā)展為教育服務(wù)業(yè)的綜合性企業(yè)集團(tuán),成為集合面授教學(xué)培訓(xùn)、網(wǎng)
達(dá)內(nèi)教育集團(tuán)成立于2002年,是一家由留學(xué)海歸創(chuàng)辦的高端職業(yè)教育培訓(xùn)機(jī)構(gòu),是中國(guó)一站式人才培養(yǎng)平臺(tái)、一站式人才輸送平臺(tái)。2014年4月3日在美國(guó)成功上市,融資1
曾工作于聯(lián)想擔(dān)任系統(tǒng)開(kāi)發(fā)工程師,曾在博彥科技股份有限公司擔(dān)任項(xiàng)目經(jīng)理從事移動(dòng)互聯(lián)網(wǎng)管理及研發(fā)工作,曾創(chuàng)辦藍(lán)懿科技有限責(zé)任公司從事總經(jīng)理職務(wù)負(fù)責(zé)iOS教學(xué)及管理工作。
浪潮集團(tuán)項(xiàng)目經(jīng)理。精通Java與.NET 技術(shù), 熟練的跨平臺(tái)面向?qū)ο箝_(kāi)發(fā)經(jīng)驗(yàn),技術(shù)功底深厚。 授課風(fēng)格 授課風(fēng)格清新自然、條理清晰、主次分明、重點(diǎn)難點(diǎn)突出、引人入勝。
精通HTML5和CSS3;Javascript及主流js庫(kù),具有快速界面開(kāi)發(fā)的能力,對(duì)瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁(yè)制作和網(wǎng)頁(yè)游戲開(kāi)發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開(kāi)發(fā)經(jīng)驗(yàn)。曾經(jīng)歷任德國(guó)Software AG 技術(shù)顧問(wèn),美國(guó)Dachieve 系統(tǒng)架構(gòu)師,美國(guó)AngelEngineers Inc. 系統(tǒng)架構(gòu)師。