LuLu UI pure版中文文档 » Dialog模态层弹框

作为插件单独使用

如果是基本弹框功能，直接引用下面CSS和JS即可：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Button.css">
<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Dialog.css">

<script src="https://qidian.gtimg.com/lulu/pure/js/common/ui/Dialog.js"></script>

如果需要用到loading弹框的，则还需要引入Loading.css，如下：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Loading.css">

弹框基本效果演示

1. alert信息提示框

alert成功提示

new Dialog().alert('操作成功！', {
    type: 'success'
}); 

我们可以type参数指定提示的类型，其他内置类型还有：'remind'提示，'danger'警示。

也可以使用自定义的类型，例如：

自定义alert提示

代码如下：

button.addEventListener('click', function () {
    new Dialog().alert('自定义提示，有标题，无图标。', {
        title: '系统提醒',
        type: 'custom'
    });
});

2. confirm确认提示框

confirm确认

button.addEventListener('click', function () {
    new Dialog().confirm('<h6>您确定要停用所选的成员吗？</h6><p>成员停用后，可以在停用成员列表中重新启用。</p>', {
        buttons: [{
            value: '停用',
            events: function (event) {
                // 按钮禁用
                button.disabled = true;
                // event.dialog是当前实例对象
                event.dialog.remove();
            }
        }, {}]
    });
});

我们可以使用buttons参数指定按钮的文案、类型以及事件。

3. 普通的内容弹框

普通panel

new Dialog({
    title: '普通文本框',
    content: '我是一段HTML，啦啦啦啦啦',
    buttons: [{
        value: '知道啦！'
    }]
}); 

4. 高度拉伸弹框

内部滚动自适应弹框

new Dialog({
    title: '中间高度自适应的容器',
    height: 'stretch',
    content: '<div class="bg-white p20">' + (function () {
        var html = '';
        for (var i = 0; i < 100; i++) {
            html = html + '<img src="https://mat1.gtimg.com/www/mb/images/face/' + i + '.gif" class="db">';
        }
        return html;
    })() + '</div>',
    buttons: [{}]
});

通过设置参数height的值为'stretch'实现。最大支持高度为1000px，如果想修改这个值直接修改CSS中对应值即可。如果浏览器高度小于1000px，弹框高度会自动上下拉伸适配。

5. loading弹框

loading弹框，ESC键关闭

new Dialog().loading();

有时候，弹框内容是Ajax动态请求的，此时在Ajax成功之前是需要一个加载状态的。体验更好的做法是根据最终呈现布局，局部动态loading，但是有时候我们想要偷懒，不想再写一个loading布局，则就可以使用这里的loading弹框。例如下面这个示意：

Ajax拉取HTML数据

代码如下：

button.addEventListener('click', function () {
    var objDialog = new Dialog({
        width: 600
    }).loading();

    // 请求页面自身
    var xhr = new XMLHttpRequest();
    xhr.open('get', location.href);
    xhr.onload = function () {
        objDialog.open(xhr.responseText.replace(/[\w\W]+<pre>([\w\W]+?)<\/pre>[\w\W]+/, '$1'), {
            title: '请求内容',
            buttons: [{}]
        });
    };
    // 演示loading效果
    xhr.send();
});

使用弹框的open()方法可以直接替换弹框显示内容。

6. 弹框打开DOM元素

content为页面上DOM元素

下拉： 选项1 选项2

var eleDomTarget = document.getElementById('domDialogTarget');
var objDomDialog;
button.addEventListener('click', function () {
    // 如果已经弹框打开过，就直接显示
    if (objDomDialog) {
        objDomDialog.show();
    } else {
        eleDomTarget.style.display = 'block';

        objDomDialog = new Dialog({
            title: 'DOM载入测试',
            content: eleDomTarget,
            buttons: [{}, {}]
        });
    }
});

7. iframe内调用

可以参考Peak主体中的弹框文档“iframe内弹框测试”这个示例。

语法和参数

基础语法

基本的弹框使用方法为：

var myDialog = new Dialog(options);

其中：

options

options是可选参数，支持的参数见下表：

后面跟随*的参数，为Dialog()方法独有的可选参数。其他扩展方法，无法重置。

{
    type: '',
    value: '',
    "for": '',
    className: '',
    events: {}
}

{
    buttons: [{}]
}

{
    buttons: [{
        value: '我知道了'
    }]
}

{
    buttons: [{
        type: 'danger'
    }]
}

{
    buttons: [{}, {}]
}

Alert弹框语法

模拟浏览器window.alert()弹框。用法如下：

var myDialog = new Dialog(options).alert(content, alertOptions);

其中：

options

可选。这里支持的options参数值是「基础语法」展示的带有红色星号*的width, height, onShow, onHide, onRemove这5个参数。

content

必须。提示的内容。支持HTML标签。

alertOptions

可选。具体参数值见下表：

实际开发用到可选参数场景并不多，多类似这样：

new Dialog().alert('弹弹弹，弹走鱼尾纹……');

Confirm弹框语法

模拟浏览器window.confirm()弹框。语法如下：

var myDialog = new Dialog(options).confirm(content, confirmOptions);

其中：

options

可选。这里支持的options参数值是「基础语法」展示的带有红色星号*的width, height, onShow, onHide, onRemove这5个参数。

content

必须。提示的内容。支持HTML标签。

confirmOptions

可选。具体参数值见下表：

一般而言，我们需要对第1个警示按钮写事件，也就是确认删除之后干嘛干嘛，如：

new Dialog().confirm('确定弹弹弹，弹走鱼尾纹？', {
    buttons: [{
        events: function(event) {
            /*
             * 这里回调，巴拉巴拉小魔仙……
             * ......
            */
            // event.dialog为弹框实例对象
            event.dialog.remove();
        }
    }, {}]
});

弹框底层open方法语法

作用是替换当前弹框实例为新的弹框内容，包括，标题、主体内容以及按钮。我们每次使用new Dialog()构造的时候，都是一个全新的弹框。有时候，我们希望直接当前弹框内容替换，例如，从loading弹框到普通弹框，就可以使用此方法。

语法如下：

var myDialog = new Dialog(options).open(content, openOptions);

其中：

options

可选。这里支持的options参数值是「基础语法」展示的带有红色星号*的width, height, onShow, onHide, onRemove这5个参数。

content

必须。弹框内容，支持类型同options.content。

openOptions

可选。具体参数值见下表：

Loading弹框语法

语法如下：

var myDialog = new Dialog(options).loading();

我们可以设定弹框的宽度以及各个回调。loading模式下，标题、关闭按钮、底部按钮都不可见，只有菊花转转转。此方法使用了Loading组件。

弹框实例对象

myDialog就是弹框实例对象，包含了下面这些属性和方法（上面已经展示的略）：

{
    element: {
        // 含半透明遮罩的容器
        container: null,
        // 弹框主体元素
        dialog: null,
        // 弹框标题元素
        title: null,
        // 弹框关闭按钮
        close: null,
        // 弹框主内容元素
        body: null,
        // 弹框底部元素
        footer: null,
        // 弹框按钮1(如果有)
        button0: null,
        // 弹框按钮2(如果有)
        button1: null
    },
    params: {
        title: '',
        width: 'auto',
        buttons: [],
        content: ''
    },
    // 3个回调方法
    callback: {
        show: function () {},
        hide: function () {},
        remove: function () {}
    },
    // 弹框显示
    show: function () {},
    // 弹框隐藏
    hide: function () {},
    // 弹框移除
    remove: function () {}
}