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);
}
}
});
});