JavaScript (ES 6) 中的多用途对话框库 – Dialog.js
栏目分类:模态 / 弹出窗口   发布日期:2021-10-22   浏览次数:

Dialog.js 是一个纯 JavaScript 插件,用于使用 HTML元素创建现代、易于设计的对话框<dialog>。

使用:

在页面上包含核心 JavaScript 和样式表。

<link rel="stylesheet" href="css/dialog.css">
<script type="text/javascript" src="js/dialog.js"></script>

包括 Edge 和 Firefox 的对话框 polyfill。

<script type="text/javascript" src="js/dialog-polyfill.js"></script>

创建警报对话框。

Dialog.alert('你好 Dialog!');

带有自定义标题。

Dialog.alert('你好 Caption', 'html369标题');

创建一个确认对话框。

Dialog.confirm('你确定要走吗', 'Question', (dlg) => {
  alert('再见!');
  dlg.close();
}, (dlg) => {
  alert('谢谢!');
  dlg.close();
});

使用自定义模板创建一个对话框。提示对话框的理想选择。

let dlg = Dialog.template(document.getElementById('tpl'), 'Use template');
dlg.beforeClosing(() => {
    let name = dlg.content.querySelector('.name').value;
    const require = 'nemo';
    if (name != require) {
        alert('您必须输入 nemo');
        return false;
    } else {
        return true;
    }
}).closed(() => { alert('关闭'); })
.cancelable = false;

创建 iframe 对话框。

Dialog.iframe('example.html', 'html369标题', '360px', '440px');

使用以下选项自定义对话框。

let dlg = new Dialog({
  caption: '用户定义对话框',
  message: '您可以单击[中止]退出。',
  showClose: false,
  buttons: Dialog.buttons.ABORT_RETRY_IGNORE,
 
  cancelable: false,
   
  abortHandler: (dlg) => { dlg.close(); },
  retryHandler: () => { alert('retry...'); },
  ignoreHandler: () => { alert('ignore'); },
});

自定义对话框的样式。

.dlg-dialog {
  border: none;
  box-shadow: 10px 10px 20px gray;
}
 
.dlg-header {
  background-color: #555;
  color: white;
}
 
.dlg-caption {
  height: 1.17em;
  text-shadow: 1px 1px 1px black;
}
 
.dlg-close-button::before,
.dlg-close-button::after {
  background-color: white;
}

所有默认自定义选项。

let dlg = new Dialog({
    caption: '',
    message: '',
    content: undefined,
    buttons: Dialog.buttons.NONE,
    resize: 'none',
    cancelable: true,
    showHeader: true,
    showClose: true,
    showFooter: false,
});

事件处理程序可用。

let dlg = new Dialog({
    abortHandler: undefined,
    cancelHandler: () => { this.close(); },
    ignoreHandler: undefined,
    noHandler: undefined,
    okHandler: () => { this.close(); },
    retryHandler: undefined,
    yesHandler: undefined,
 
    // 事件
    beforeClosing: () => { return true; }, // 置为 false 以防止关闭
    closed: undefined,
});


官方网站:https://github.com/nemo-wu/dialog

相关热词: Dialog.js确认对话提示

下一篇:没有了
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库