bootstrap modal模態框
阿新 • • 發佈:2018-11-03
bootstrap modal模態框
因為專案中用到了bootstrap table 顯示錶格且要為每一行設定一個按鈕要就能檢視資訊,所以就直接用bootstrap帶的模態框,但是有個缺點就是非同步的時候比較慢,體驗不是特別的好,至於後來換哪種彈框在本文結尾會敘述。
modal bootstrap
首先,先引入bootstrap.js和.css檔案,如果要是跟我一樣使用bootstrap table還需要進入table的相關js和css 檔案
<link href="/BOLI_JT/static/bootstrap/3.3.4/css_default/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script src="/BOLI_JT/static/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
<link href=" ${ctxStatic}/bootstrap-table-master/dist/bootstrap-table.min.css" rel="stylesheet">
<script type="text/javascript" src="${ctxStatic}/bootstrap-table-master/dist/bootstrap-table.min.js" ></script>
<script src="${ctxStatic}/bootstrap-table-master/src/locale/bootstrap-table-zh-CN.js"></script>
###新增按鈕
function operateFormatter(value, row, index) {
return [
'<button id="adjustButton" type="button" class="btn btn-info btn-xs" style="margin-right:15px;">調整</button>'
].join('');
}
window.operateEvents = {
"click #adjustButton": function (e, value, row, index) {
/* $("#teamId").val(row.teamId);
$("#updateTime").val(row.startTime);
$("#planIds").val(row.planId); */
$("#myModal").modal({
remote:"${ctx}/plan/blPlanAdjustment/adjustmentForm?id="+row.id
});
}
};
如程式碼所示,使用.modal()方法就可以為你定義的模態框顯示了,其中,remote 中填寫的地址返回的是一個頁面,這樣就可以將該頁面載入在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>
</div>
</div>
這三個div是需要你寫在你想觸發點選事件的頁面中的,然後通過remote就會將頁面和資料顯示在modal-content中,缺點就是如果你也是這麼用的,那麼在你要載入進模態框中頁面中,用不了form.validate()中的ajaxSubmit,所以只能自己在該頁面為按鈕設定點選時間,進行相應的操作。別忘了事件要寫在 $(function () { });中,否則是不會有效果的。
<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">
<form:form id="inputForm" modelAttribute="blPlanAdjustment" method="post" class="form-horizontal">
<form:hidden path="id"/>
<sys:message content="${message}"/>
<fieldset>
<div class="form-group">
<label class="col-sm-1 control-label" style="font-size:13px;"><font color="red">*</font>計劃:</label>
<div class="col-sm-4">
<form:input path="planId" value="${blPlanTeam.planId}" readonly="true" htmlEscape="false" class="form-control" style="width:200px;"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label" style="font-size:13px;"><font color="red">*</font>班組:</label>
<div class="col-sm-4">
<form:input path="teamId" value="${blPlanTeam.teamId}" readonly="true" htmlEscape="false" class="form-control" style="width:200px;"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label" style="font-size:13px;"><font color="red">*</font>分配日期:</label>
<div class="col-sm-4">
<form:input path="updateTime" value="${blPlanTeam.startTime}" readonly="true" htmlEscape="false" class="form-control" style="width:200px;"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label" style="font-size:13px;"><font color="red">*</font>調整數量:</label>
<div class="col-sm-4">
<form:input path="adjustmentNumbers" htmlEscape="false" placeholder="請輸入調整數量" class="form-control required" style="width:200px;"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label" style="font-size:13px;"><font color="red">*</font>調整原因:</label>
<div class="col-sm-4">
<form:textarea path="adjustmentDesc" rows="6" cols="40" />
</div>
</div>
<!-- <div class="panel-footer" align="right">
<button type="submit" class="btn btn-primary">調整計劃</button>
</div> -->
</fieldset>
</form:form>
</div>
<div class="modal-footer">
<button type="submit" id ="fromSubmit" class="btn btn-primary">調整</button>
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
</div>
這些是要載入到模態框中的頁面資訊,後臺程式碼我就不多敘述了,效果如下
但是就如文章開頭說的一樣,載入時會比較慢,體驗不是特別好。
另一種彈框
我在專案中採用的另一種彈框,是layer外掛
top.layer.open({
type: 2,
area: ['1000px', '500px'],
title:"調整計劃",
name:'friend',
content: "${ctx}/plan/blPlanAdjustment/adjustmentPlanForm?id="+row.id,
/* btn: ['調整', '關閉'],
yes: function(index, layero){
},
cancel: function(index){
} */
});
這樣實現的效果跟之前的模態框有點差距但是不大,完全可以替換,功能也是可以實現,而且,在載入時,比模態框要快,體驗更好。
可能頁面效果沒有那個好看,但是載入的要快,所以也就暫時做了兩個版本的彈框,以供選擇。
離線寫部落格
本文為本人根據專案需求研究寫出,也許有所不足,真誠的希望,有大牛能幫我糾正一下,我的錯誤,互相提高,以便以為可以分享更好的程式碼和技術給大家,攜手在研發的道路上一去不復返。