layer——优雅的web弹层组件

在web应用交互体验中，弹出框是一个十分重要功能，可是浏览器原生的alert却是这般模样

这模样在现代化的web页面中实在不忍直视，今天给大家推荐一个优雅的web弹层的组件——layer。先一睹为快

我简单介绍下用法和我的封装 dialog.js

var dialog = {
    //错误弹出层
    error: function (message) {
        layer.open({
            content: message,
            icon: 2,
            title: '错误提示',
        });
    },

    //成功弹出层
    success: function (message, url) {
        layer.open({
            content: message,
            icon: 1,
            yes: function () {
                location.href = url;
            }
        });
    },

    //确认弹出框
    confirm: function (message, url) {
        layer.open({
            content: message,
            icon: 3,
            btn: ['是', '否'],
            yes: function () {
                location.href = url;
            },
        });
    },

    //无需跳转到指定页面的确认弹出框
    toConfirm: function (message) {
        layer.open({
            content: message,
            icon: 3,
            btn: ['确定'],
        });
    },
}

具体用法，先引入js文件，（注意，layer依赖jquery）

<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/layer/layer.js"></script>
<script type="text/javascript" src="js/dialog.js"></script>

接着在js代码中调用，

dialog.error("登录失败！");
dialog.toConfirm("确定删除？");

详细的介绍和文档参见 官网，layer——希望对你有帮助。