Bootstrap模態(tài)框使用詳解
更新時間：2017年02月15日 11:00:35 作者：風(fēng)輕云淡觀自在
這篇文章主要為大家詳細(xì)介紹了Bootstrap模態(tài)框的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Bootstrap模態(tài)框的兩種使用狀況，供大家參考，具體內(nèi)容如下
一.模態(tài)框的正常點(diǎn)擊出現(xiàn)，如添加功能
<td width="120px">
<button type="button class="btn btn-blue" style="width: 100px;"
data-toggle="modal" data-target="#systemAdd">添加</button></td>
<!-- 添加的模態(tài)框 --> </aside>
<div class="modal fade" id="systemAdd" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header modal-header-blue">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title">添加</h4>
</div>
<div class="modal-body text-center">
<form role="form-horizontal"
action="${ctx}/system/addSystemUser.xht" method="post"
id="addForm">
<div class="form-group">
<label for="name">用戶ID</label> <input type="text"
class="form-control" id="userId0" name="userId"
placeholder="請輸入用戶ID">
</div>
<div class="form-group">
<label for="name">密碼</label> <input type="text"
class="form-control" id="userPwd" name="userPwd"
placeholder="請輸入密碼">
</div>
<div class="form-group">
<label for="name">系統(tǒng)ID</label> <input type="text"
class="form-control" id="systemCode" name="systemCode"
placeholder="請輸入系統(tǒng)ID">
</div>
<div class="form-group">
<label for="name">是否是管理員</label> <select class="form-control "
id="superFlg" name="superFlg">
<option value="0">否</option>
<option value="1">是</option>
</select>
</div>
<div class="form-group">
<label for="name">刪除標(biāo)志</label> <select class="form-control "
id="delFlg" name="delFlg">
<option value="0">正常</option>
<option value="1">刪除</option>
</select>
</div>
<div class="form-group">
<label for="name">創(chuàng)建日期</label>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" placeholder="請選擇創(chuàng)建日期"
data-date-format="YYYY-MM-DD HH:mm:ss" id="createTime"
name="createTime" /> <span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-blue" data-dismiss="modal"
onclick="addSystemUser()">添加</button>
<button type="button" class="btn btn-default"
data-dismiss="modal">關(guān)閉</button>
</div>
</div>
</div>
</div>
二.還有一種就是編輯，此時在彈出模態(tài)框時，里面要寫入數(shù)據(jù)，所以要先取得數(shù)據(jù)再彈出模態(tài)框。這時要加入js代碼控制
1.jsp頁面
<td width="120px">
<button type="button "
class="btn btn-green" style="width: 100px;"
onclick="updateSystemUser()">修改</button></td>
<div class="modal fade" id="systemUpp" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header modal-header-green">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title">修改</h4>
</div>
<div class="modal-body text-center">
<form role="form-horizontal"
action="${ctx}/system/updateUser.xht" method="post"
id="modifyForm">
<div class="form-group" hidden="hidden">
<label for="name">NO</label> <input type="text"
class="form-control" id="no1" name="no" readonly>
</div>
<div class="form-group" hidden="hidden">
<label for="name">用戶ID</label> <input type="text"
class="form-control" id="userId1" name="userId" readonly
placeholder="請輸入用戶ID">
</div>
<div class="form-group">
<label for="name">用戶名</label> <input type="text"
class="form-control" id="userName1" name="userName"
placeholder="請輸入用戶名">
</div>
<div class="form-group" hidden="hidden">
<label for="name">密碼</label> <input type="text"
class="form-control" id="userPwd1" name="userPwd"
placeholder="請輸入密碼">
</div>
<div class="form-group">
<label for="name">系統(tǒng)ID</label> <input type="text"
class="form-control" id="systemCode1" name="systemCode"
placeholder="請輸入系統(tǒng)ID">
</div>
<div class="form-group" hidden="hidden">
<label for="name">是否是管理員</label> <select class="form-control "
id="superFlg1" name="superFlg">
<option value="0">否</option>
<option value="1">是</option>
</select>
</div>
<div class="form-group">
<label for="name">刪除標(biāo)志</label> <select class="form-control "
id="delFlg1" name="delFlg">
<option value="0">正常</option>
<option value="1">刪除</option>
</select>
</div>
<div class="form-group" hidden="hidden">
<label for="name">創(chuàng)建日期</label>
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control"
data-date-format="YYYY-MM-DD HH:mm:ss" id="createTime1"
name="createTime" placeholder="請選擇創(chuàng)建日期" /> <span
class="input-group-addon"> <span
class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-green" data-dismiss="modal"
onclick="modifySystemUser()">修改</button>
<button type="button" class="btn btn-default"
data-dismiss="modal">關(guān)閉</button>
</div>
</div>
</div>
</div>
2.js代碼
/**
* 修改用戶(將用戶信息寫入模態(tài)框)
*/
function updateSystemUser() {
var tempInput = new Input();
tempInput.userId = $('input[name="userId"]:checked').val();
if (tempInput.userId == null) {
alert("請選擇一條數(shù)據(jù)來修改");
} else {
var params = JSON2.stringify(tempInput);
var url = "/emailplatform/system/selectOneUser.xht";
ajaxJson(url, true, params, function(reObject) {
// 開啟模態(tài)框
var dialog = $('#systemUpp').modal({
backdrop : 'static',
keyboard : false
});
dialog.modal('show');
if (reObject) {
$("#no1").val(reObject.data.no);
$("#userId1").val(reObject.data.userId);
$("#userName1").val(reObject.data.userName);
$("#userPwd1").val(reObject.data.userPwd);
$("#systemCode1").val(reObject.data.systemCode);
$("#superFlg1").val(reObject.data.superFlg);
$("#delFlg1").val(reObject.data.delFlg);
$("#createTime1").val(reObject.data.createTime);
}
});
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了JavaScript實現(xiàn)的一個倒計時的類,本文直接給出demo代碼,需要的朋友可以參考下2015-03-03
JavaScript 學(xué)習(xí) - 提高篇...2007-02-02
javascript html5 canvas實現(xiàn)可拖動省份的中國地圖
這篇文章主要介紹了javascript html5 canvas實現(xiàn)可拖動省份的中國地圖的相關(guān)資料,需要的朋友可以參考下2016-03-03
JS短信驗證碼倒計時功能的實現(xiàn)（沒有驗證碼，只有倒計時）
最近接了個項目，其中有這樣的需求：當(dāng)用戶想要獲取驗證碼時，就點(diǎn)擊免費(fèi)獲取驗證碼 ，然后開始倒計時，倒計時期間按鈕文字為剩余時間x秒，且不可按狀態(tài)，倒計時結(jié)束后，按鈕更改為點(diǎn)擊重新發(fā)送，下面給大家分享js短信驗證碼倒計時實現(xiàn)代碼2016-10-10
JavaScript ES6中export、import與export default的用法和區(qū)別
這篇文章主要給大家介紹了JavaScript ES6中export、import與export default的用法和區(qū)別，文中介紹的非常詳細(xì)，相信對大家學(xué)習(xí)ES6會有一定的幫助，需要的朋友可以參考借鑒，下面來一起看看吧。2017-03-03
JS實現(xiàn)點(diǎn)擊復(fù)選框變更DIV顯示狀態(tài)的示例代碼
下面小編就為大家分享一篇JS實現(xiàn)點(diǎn)擊復(fù)選框變更DIV顯示狀態(tài)的示例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)輪播圖效果的3種簡單方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)tab標(biāo)簽頁，可點(diǎn)擊切換，滑動切換頁面,文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
IE的有條件注釋是一種專有的（因此是非標(biāo)準(zhǔn)的）、對常規(guī)（X）HTML注釋的Miscrosoft擴(kuò)展。顧名思義，有條件注釋使你能夠根據(jù)條件（比如瀏覽器版本）顯示代碼塊(不一定就是css，也可以是html代碼，甚至是JavaScript代碼)。2012-01-01
js split函數(shù)用法總結(jié)(從入門到精通)
js split就是將一字符串以特定的字符分割成數(shù)組,數(shù)組一般是字符串處理比較常用的處理方法2013-03-03