摘要：
divclass=“模态对话框”>；divclass=“modal header”>；spanaria hidden=“true”>；h4class=“模态标题”>；divclass=“modal body”>；divclass=“模态页脚”>；
普通的询问是否删除的对话框比较low，可以利用bootstrap的模态框代替普通的对话框来实现删除。
效果:
点删除的时候弹出模态框询问是否删除，点确认的时候将需要删除的ID传到后台进行删除。
过程:
1.界面准备删除模态框:
模态框中隐藏需要删除的ID
<!-- 模态框 信息删除确认 -->
<div id="delcfmOverhaul">
<div class="modal-dialog">
<div class="modal-content message_align">
<div class="modal-header">
<button type="button" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">提示</h4>
</div>
<div class="modal-body">
<!-- 隐藏需要删除的id -->
<input type="hidden" />
<p>您确认要删除该条信息吗？</p>
</div>
<div class="modal-footer">
<button type="button"
data-dismiss="modal">取消</button>
<button type="button"
id="deleteHaulBtn">确认</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->2.删除按钮:
<a href="javascript:void(0)" onclick="showDeleteModal(this)">删除</a>
结构:
3. 删除按钮点击事件:
根据传下来的obj获取到ID并设置到删除模态框中的隐藏域，同时打开询问是否删除的模态框
// 打开询问是否删除的模态框并设置需要删除的大修的ID
function showDeleteModal(obj) {
var $tds = $(obj).parent().parent().children();// 获取到所有列
var delete_id = $($tds[0]).children("input").val();// 获取隐藏的ID
$("#deleteHaulId").val(delete_id);// 将模态框中需要删除的大修的ID设为需要删除的ID
$("#delcfmOverhaul").modal({
backdrop : 'static',
keyboard : false
});
}4. 删除模态框确定按钮的点击事件
获取到隐藏域的ID并传到后台进行删除，删除成功重新加载页面
function deleteHaulinfo() {
alert("你即将删除的大修ID" + $("#deleteHaulId").val())
}$(function() {
// 删除大修模态框的确定按钮的点击事件
$("#deleteHaulBtn").click(function() {
// ajax异步删除
deleteHaulinfo();
});
});