bootstrap 做的模态框点击关闭，背景蒙版无法删除，再次点击触发按钮无法弹出模态框；
问题一：点击【删除全部】按钮后，弹出的模态窗口，背景蒙版没删除
问题二：点击没有消失的蒙版，再次点击【删除全部】按钮，没有弹出模态框
、
目前发现的原因是第80行，添加了 delAll这个ID就会出现这个问题，把delAll改名也不行，要怎么解决呢?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>账号管理系统</title>
<link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.wrap{
padding:30px;
}
.header{
width:100%;
height: 40px;
background:#428bca;
margin-bottom:20px;
position:relative;
color:#fff;
}
.alert{
display:none;
position:absolute;
width:100%;
}
.title{
line-height:40px;
padding-left:15px;
}
.hi{
display:none;
}
</style>
</head>
<body>
<div class="wrap">
<!-- 添加提示 -->
<div class="header">
<div class="alert alert-success"> <strong>成功！</strong>很好地完成了提交。</div>
<div class="alert alert-warning"><strong>注意！</strong>用户名，密码不能为空! <a href="#" class="close" data-dismiss="alert">
×
</a></div>
<span class="title">账号系统</span>
</div>
<form action="" method="get" >
<div class="form-group">
<label for="name">用户名：</label>
<input type="text" name="username" placeholder="请输入用户名" class="form-control" id="username" >
</div>
<div class="form-group">
<label for="password">密码：</label>
<input type="text" name="password" placeholder="请输入密码" class="form-control" id="password">
</div>
<div class="form-group text-right">
<input type="button" class="btn btn-primary" value="添加" id="add">
<input type="reset" class="btn btn-danger" value="重置" id="del">
</div>
</form>
<hr>
<!-- 数据表格 -->
<table class="table text-center table-bordered table-hover">
<caption>表格信息</caption>
<thead >
<tr >
<th class="text-center">选择</th>
<th class="text-center">序号</th>
<th class="text-center">用户名</th>
<th class="text-center">密码</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr class="hi" id="delAll">
<td colspan="5" class="text-right">
<button type="text" class="btn btn-warning" id="delSelectBtn">删除选中部分</button>
<button type="text" class="btn btn-danger" id="delAllBtn" data-toggle="modal" data-target="#myModal">删除全部</button>
</td>
</tr>
<tr >
<td colspan="5" rowspan="3" class="text-muted" style="line-height:60px" id="noData">暂无数据</td>
</tr>
</tbody>
</table>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" 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>
<h4 class="modal-title" id="myModalLabel">
模态框（Modal）标题
</h4>
</div>
<div class="modal-body">
在这里添加一些文本
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</div>
<script type="text/javascript">
//添加命名空间
var account={};
account.add=function(){
//获取到数据后，添加到数组中；
var uName=$("#username").val();
var pWord=$("#password").val();
var a={username:uName,password:pWord};
//用户名，密码不能为空
if(uName=="" || pWord==""){
$(".alert-warning").fadeIn();
}
else{
//添加数据在尾部；
var otr='<tr><td><input type="checkbox" value=""></td><td class="numData"></td><td>'+uName+'</td> <td>'+pWord+'</td> <td><button type="text" class="btn btn-default">删除</button></td></tr>';
$("#delAll").before(otr);
//清空原input框中的数据；
$("#username").val("");
$("#password").val("");
//把数据显示在table表格中；
$("#delAll").show();
$("#noData").hide();
//显示，隐藏指示栏；
$(".alert-success").fadeIn();
setTimeout(function(){$(".alert-success").fadeOut()},1500);
//删除指定行
$(".btn-default").on("click", function(){
var oTr=$(this).parent().parent();
oTr.remove();
account.isEmpty();
account.addNumData();
});
account.addNumData();
}
}
//判断数据是否为空
account.isEmpty=function(){
var x=$("tbody tr").length;
if(x==2){
$("#delAll").hide();
$("#noData").show();
}
}
//添加序列号
account.addNumData=function(){
for(var i=0;i<=$(".numData").length;i++){
$(".numData").eq(i).text(i+1);
}
}
//删除选中部分
account.delSelect=function(){
$(":checked").parent().parent().remove();
account.addNumData();
account.isEmpty();
}
//为方法绑定事件；
$("#add").on("click",account.add);
$("#delAllBtn").on("click",account.delAll);
$("#delSelectBtn").on("click",account.delSelect);
</script>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
你的关闭按钮的class也是btn-default.然而你给它绑定了事件.
你把关闭的btn-defau改成其他 或者把你 删除的按钮换个选择器