确认删除弹出层

最新推荐文章于 2023-03-23 19:28:16 发布

阿泽努力变瘦变美丽

最新推荐文章于 2023-03-23 19:28:16 发布

阅读量1.4k

点赞数 1

分类专栏：前端文章标签：弹出层

本文链接：https://blog.csdn.net/gongze_yan/article/details/83009678

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、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事件就好啦，不要像我一样遇到新东西就把之前会的都给否定不会啦！

阿泽努力变瘦变美丽

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
确认删除弹出层

一、layer实现确认删除弹出层新手上路，由于之前项目老司机的弹出层都是通过layer.open实现的，如下：layer.open({ closeBtn: false, shadeClose: true, //area:['380px','350px'], //不写title默认为“信息” //title:'信息', content: '删...
复制链接

扫一扫