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