一、layer实现确认删除弹出层
新手上路,由于之前项目老司机的弹出层都是通过layer.open实现的,如下:
layer.open({
closeBtn: false,
shadeClose: true,
//area:['380px','350px'],
//不写title默认为“信息”
//title:'信息',
content: '删除成功'
})
所以在实现确认删除弹出层时首先实现通过layer实现,如下:
layer.open({
content: '确定删除该站内信?',
btn: ['确认', '取消'],
yes: function (index, layero) {
stationLetter.deleteStationLetterConfirm(letter_id);
},
//btn2和cancel方法没有用到,可以不写
btn2: function (index, layero) {
},
cancel: function () {
//右上角关闭回调
}
})
调用的函数会layer.open删除成功,实现如下:
二、Bootstrap的modal模态框插件实现确认删除弹出层
该项目前端框架主要应用了bootstrap,所以在实现的时候也想到了用bootstrap来实现,问了度娘才知道所有这种类似的弹出层在bootstrap中都被成为模态框。
实现过程中主要有几部分,
①在触发模态框的button上加入data-toggle="modal":触发为模态框形式,和data-target="#firstModal":编写的模态框html
②编写的模态框中包括dialog,content,header,body,footer,具体包含关系如下:
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
模态框整体实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 模态框(Modal)插件方法</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>模态框(Modal)插件方法</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#firstModal">删除</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="firstModal" 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>
<h5 class="modal-title" id="myModalLabel">
模态框(Modal)标题
</h5>
</div>
<div class="modal-body">
确认删除该条站内信?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#secondModal">
删除
</button>
<button type="button" class="btn btn-default"
data-dismiss="modal">取消
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="secondModal" 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>
<h5 class="modal-title" id="myModalLabel">
信息
</h5>
</div>
<div class="modal-body">
已删除
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">确定
</button>
</div>
</div>
</div>
</div>
</body>
</html>
其中点击第一层模态框后悔弹出第二层模态框,看具体情况添加和删除,重点就在data-toggle="modal" data-target="#secondModal"这两个属性。注:不能调用自己所在模态框!!!
需要在点击“删除”或其他进行操作就在“删除”所在button添加个onclick事件就好啦,不要像我一样遇到新东西就把之前会的都给否定不会啦!