確認刪除彈出層
阿新 • • 發佈：2018-11-22
一、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事件就好啦，不要像我一樣遇到新東西就把之前會的都給否定不會啦！
