Skip to content

dialog 对话框

自定义框内内容

学习基础

假设你已经对 javascript 有了一定的了解。如不了解,请先去 W3School、菜鸟教程、MDN等平台学习javascript基础知识。

使用

示例

javascript
// 定义内容
<div class="open-dialog" id="dialog">
    <p>dialog内容</p>
</div>


// 通过id进行初始化
let dialog = opener.dialog({
    id: '#dialog',
    title: '标题',
    width: '800px',
    height: '800px',
    cover: true,// 显示遮罩,默认显示true
    // 配置按钮文本
    lang: {
        ok: 'ok',
        cancel: 'cancel'
    },
    // 控制按钮和标题显示
    show: {
        ok: true,
        cancel: true,
        title: true
    }, 
    click: (res)=>{
        console.log(res); // close|ok|cancel
    }
})

// 显示
dialog.show();

// 隐藏
dialog.hide()

按钮多语言

默认按钮时确定和取消

js
// 默认类型
opener.dialog({
     // 自定义按钮文本
    lang: {
        ok: 'ok',
        cancel: 'cancel'
    },
});

控制按钮和标题的显示

默认显示按钮和标题

js
// 默认类型
opener.dialog({
     // 控制按钮显示
    show: {
        ok: false,
        cancel: false,
        title: false
    },
});