LuLu UI pure版中文文档 »

Fork Me

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信息提示框

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

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

也可以使用自定义的类型,例如:

代码如下:

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

2. 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. 普通的内容弹框

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弹框

new Dialog().loading();

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

代码如下:

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元素

下拉:

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是可选参数,支持的参数见下表:
参数名称 支持类型 默认值 释义
title String '' 表示弹框的标题。
content String
Object
Function
'' 表示弹框显示的主体内容。可以是HTML字符串,或者是DOM对象,也可以是返回HTML字符串或DOM对象的函数。参数类型不同,弹框关闭的方法也不一样,DOM对象关闭执行hide()方法,HTML内容执行remove()方法。
width* String
Number
'auto'

标题弹框的主体宽度,可以是纯数值,会当作像素单位处理,也支持其他任意单位,例如'60vw', '60%'等。

默认值是'auto',表示宽度自适应。

height* String
Number
'auto'

标题弹框的主体高度,可以是纯数值,会当作像素单位处理,也支持其他任意单位,例如'60vh', '60%'等。

支持关键字'stretch',表示高度拉伸。

buttons Array [] 弹框的按钮元素。默认是空数组,表示没有按钮。每个按钮为一个{}对象,含一些可选参数,具体释义见表格下面内容。
onShow* Function function () {} 弹框显示时候的回调。this为当前弹框实例对象,支持一个参数,为当前<dialog>容器元素。
onHide* Function function () {} 弹框隐藏时候的回调。this为当前弹框实例对象,支持一个参数,为当前<dialog>容器元素。
onRemove* Function function () {} 弹框移除时候的回调。this为当前弹框实例对象,支持一个参数,为当前<dialog>容器元素。

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


buttons参数数组项支持参数如下:
{
    type: '',
    value: '',
    "for": '',
    className: '',
    events: {}
}

其中:

参数名称 支持类型 默认值 释义
type String 'primary'或'' 表示按钮的类型。和Button.css中按钮类型关键字对应。默认值与当前对象在buttons参数数组中的位置有关。第一个按钮对象,默认值是'primary',也就是蓝色按钮,也就是如果你的弹框只有一个按钮,默认是蓝色。之后的按钮,默认则是白色按钮,如白色的“取消”按钮。
value String '确定'或'取消' 表示按钮的文字内容。默认值与当前对象在buttons参数数组中的位置有关。如果在数组的第一个选项中,默认值是'确定',如果在后面的选项,则按钮默认值是'取消'
for String '' 如果for属性值有设置,则按钮会使用<label>元素代替<button>元素。通常该参数值指向一个submit类型按钮的id属性值。
className String '' 表示按钮上额外添加的类名。
events Object|Function {} 表示按钮绑定的事件。可选,如果不设置,会调用弹框关闭事件。

如果只有click事件,可以直接使用Function类型参数,例如:

events: function (event) {
  event.dialog.remove();
}

因此:

1. 如果你的弹框默认就是一个文字为“确定”的确认按钮,则buttons参数内容就是:

{
    buttons: [{}]
}

2. 如果你的弹框默认就是一个蓝色确认按钮,但是文字内容是“我知道了”,则buttons参数内容就是:

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

3. 如果你的弹框默认就是一个文字为“确定”的确认按钮,但是是红色的警示按钮,则buttons参数内容就是:

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

4. 如果你的弹框默认就有一个蓝色“确定”按钮,和一个白色“取消”按钮,则buttons参数内容就是:

{
    buttons: [{}, {}]
}

我们只需要空对象占位就好了。你也可以使用null占位。

Alert弹框语法

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

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

其中:

options
可选。这里支持的options参数值是「基础语法」展示的带有红色星号*width, height, onShow, onHide, onRemove这5个参数。
content
必须。提示的内容。支持HTML标签。
alertOptions
可选。具体参数值见下表:
参数名称 支持类型 默认值 释义
title String '' alert弹框默认无标题文字,本项目,此参数不需要关心。
type String 'remind' alert弹框的类型, 参数包括'remind', 'success', 'danger', 或者任意自定义'custom'。对应效果图缩略图如下:

buttons Array [{}] 表示按钮。默认为1个蓝色“确定”按钮。

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

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
可选。具体参数值见下表:
参数名称 支持类型 默认值 释义
title String '' 弹框的标题文字,默认无标题。
type String 'danger' 弹框的类型, 参数包括'remind', 'success', 'danger', 或者任意自定义'custom'。同Alert弹框,差别在于图标。
buttons Array [{
  type: 'danger'
}, {}]
表示按钮。默认为1个红色警示“确定”按钮和1个普通浅色按钮。

一般而言,我们需要对第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
可选。具体参数值见下表:
参数名称 支持类型 默认值 释义
title String '' 弹框的标题文字。
buttons Array [] 表示按钮。默认没有任何按钮。

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 () {}
}
本页贡献者:

zhangxinxu