【前端】弹窗美化 layer 与 sweetalert 弹窗插件学习

一、layer.confirm

1.1 效果

此时只有点击确定，才会执行删除操作；点取消不会删除（两个函数二选一）。

1.2 用法

layer.confirm(content, options, yes, cancel)

1.3 代码分析

onclick事件触发doDel函数，doDel函数执行删除操作

<button type="button" class="btn btn-danger" onclick="doDel('{% url 'delvuln' data.id %}')">删除</button>

  <script>
        //自定义执行信息删除提示判断，参数uu是成功的删除url地址
        function doDel(uu) {
            layer.confirm('是否要删除？', {
                btn: ['确定', '取消']
                // 按钮
            }, function () {
                //网页跳转
                window.location = uu;

            });
        }
    </script>

layer.confirm空白框架：

    layer.confirm('是否要删除？', {
            btn : ['确定', '取消']
              // 按钮
            }, function() {
				xxxxxxxx

  });

二、layer.open

2.1 效果

只起弹窗效果，不会执行任何函数。

2.2 用法

layer.open(options)  //核心方法

2.3 示例

layer.open({
  title: '在线调试'
  ,content: '可以填写任意的layer代码'
});

三、layer.alert

3.1 效果

此时不论是否点击确定，都会直接删除（只会执行一个函数）。‘删除成功’只是个信息。

3.2 用法

layer.alert(content, options, yes)		//普通信息框

3.3 示例

   <script>
        //自定义执行信息删除提示判断，参数uu是成功的删除url地址
        function doDel(uu) {
            layer.alert("删除成功！", function () {
                window.location = uu;
            });
        }
    </script>

layer.alert空白框架：

layer.alert("删除成功！",function(){
		xxxxxxxx
	}); 

四、layer.msg 与 layer.load

layer.msg(content, options, end)		//提示框	

layer.load(icon, options)		//加载层

五、layer.js引入方法

将整个layer文件夹加入项目

并单独引入layer.js单个文件

 <script type="text/javascript" src="/static/layer/layer.js"></script>

六、另一种alert美化——swal

6.1 引入

在线：

<link rel="stylesheet" type="text/css" href="https://blog.huangwx.cn/css/sweetalert.css">
<script type="text/javascript" src="https://blog.huangwx.cn/js/sweetalert-dev.js"></script>

离线：https://blog.huangwx.cn/win95/sweetalert.zip

6.2 用法

6.2.1 标准弹窗

swal("开始这个完美的弹出框旅程吧！")

6.2.2 带标题的弹窗

swal("这是标题！","这是文本")

6.2.2 带成功提示的弹窗

swal("这还是标题！","这还是文本","success")

七、layer学习

layer.js的具体参数含义及其他方法请去这里查询：http://www.h-ui.net/lib/layer.js.shtml

layer.js参考：https://blog.csdn.net/kxukai/article/details/103071754

sweetalert-dev.js参考：https://blog.csdn.net/windy1001/article/details/82685977