1、bootstrap模態框之html代碼
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="./css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.js"></script>
<title>分類管理</title>
</head>
<body>
<div class="container">
<h2>分類管理</h2>
<div class="panel panel-default">
<table class="table table-striped table-hover">
<thead>
<tr class="info">
<td>ID</td>
<td>欄目名稱</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>mysql基礎</td>
<td>
<a href="#infoModal" role="button" data-toggle="modal" data-id="1" data-catename="mysql基礎"><i class="fa fa-pencil"></i>修改</a>
<a href="#delModal" role="button" data-toggle="modal" data-id="1"><i class="fa fa-trash-o"></i>刪除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 添加分類按鈕 -->
<button class="btn btn-success" data-toggle="modal" data-target="#infoModal" data-id="0"><i class="fa fa-plus"></i>添加分類</button>
<!-- 分類刪除模態框 -->
<div class="modal small fade" id="delModal" 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>
<h3 id="myModalLabel">刪除確認</h3>
</div>
<div class="modal-body">
<h4 style="text-align:center;">
<i class="fa fa-warning modal-fa" style="color:red;"></i>
您確認要刪除該分類嗎？<br />刪除該分類的同時會自動刪除該分類下面所有的文章。
</h4>
</div>
<div class="modal-footer">
<button class="btn btn-danger" id="delButton" data-account="" data-complete-text="正在刪除...">刪除</button>
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">取消</button>
</div>
</div>
</div>
</div>
<!--添加或修改分類模態框-->
<div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="exampleModalLabel">添加或修改分類</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="catename" class="control-label">分類名稱：</label>
<input type="text" class="form-control" id="catename" style="width: 84%; display: inline;" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="addoredit">保存</button>
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
</div>
</div>
</div>
</div>
</body>
</html>
2、、bootstrap模態框之javascript代碼
// 全局變量分類ID
var cateid = 0;
// 打開添加、編輯模態框
$('#infoModal').on('show.bs.modal',function(event){
var button = $(event.relatedTarget);
var modal = $(this);
//獲取要操作的ID
cateid = button.data('id');
if(cateid == 0){
$('#catename').val('');
}else{
//把要修改的分類名稱顯示出來,更多數據可以通過ajax獲取
$('#catename').val(button.data('catename'));
}
});
//提交分類添加、修改表單
$('#addoredit').on('click', function () {
//$(this).button('complete'); //button text will be "finished!"
var catename = $("#catename").val();
if (catename == '') {
alert("請輸入分類名稱！");
return;
}
var action=cateid==0?'add':'edit';
$.ajax({
url:'……',
type:'post',
dataType: 'json',
data:{action:action,cateid:cateid,catename:catename},
error:function(){
alert('出現錯誤！');
},success:function (data){
if(data.indexOf('error') < 0){
$('#infoModal').modal('hide');
location.reload();
}else{
alert(data);
}
}
});
});
// 打開刪除分類模態框
$('#delModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
cateid = button.data('id');
});
// 提交刪除分類
$('#delButton').on('click',function(){
$(this).button('complete');
$.ajax({
url:'',
type:'post',
dataType: 'json',
data:{action:'del',cateid:cateid},
error:function(){
alert('出現錯誤！');
},success:function(data){
if (data.indexOf('error') < 0){
//模態框隱藏
$('#delModal').modal('hide');
location.reload();
}else{
alert(data);
}
}
});
});