版本：5.1

Joomla 对话框（弹出窗口）脚本

Joomla 对话框模块提供了一种功能，允许显示各种对话框（弹出窗口）。

要将 Joomla 对话框模块添加到页面，请使用 WebAssetManager $wa->useScript('joomla.dialog')，并使用 $wa->useScript('joomla.dialog-autocreate') 来启用页面上按钮的自动绑定。

Joomla 对话框允许显示具有以下内容的对话框

inline - 文本或 html 内容；
iframe - 在 iframe 中嵌入/远程内容；
ajax - 与 inline 相同，但内容通过 ajax 请求加载；
image - 图片灯箱；

提供用于替换 alert() 和 confirm() 对话框的辅助方法。提供了一个辅助工具来将页面按钮/锚点绑定到显示弹出窗口，用于基本操作，无需额外的 js。

属性

popupType (string) 弹出窗口类型，支持：inline、iframe、image、ajax。
src (string) iframe、图片、ajax 的源路径。
popupContent (string|HTMLElement|HTMLTemplateElement) 内联类型弹出窗口的内容。
cancelable (boolean) 弹出窗口是否可以通过 Esc 键关闭。
textClose (string) 关闭按钮的可选文本。在没有提供按钮的情况下应用。
textHeader (string) 标题的可选文本。
iconHeader (string) 标题图标的可选类名。
width (string) 弹出窗口宽度的可选限制，任何有效的 CSS 值。
height (string) 弹出窗口的可选高度，任何有效的 CSS 值。
popupTemplate (string|HTMLTemplateElement) 弹出窗口的模板。
preferredParent (string|HTMLElement) 将对话框附加到的元素，用于不存在 parentElement 的情况，请参见 show()。这允许将对话框保持在与 popupContent 相同的 DOM 分支中。
popupButtons (array) 按钮的可选列表，将在页脚/标题（或不存在页脚/标题时弹出窗口主体底部/顶部）中呈现。
className (string) joomla-dialog 元素的可选类。
data (object) joomla-dialog 元素的数据属性的可选对象。注意：数据键应为 camelCase，例如 {fooBar: 1} 表示 data-foo-bar="1"。

注意

Joomla 对话框的属性是不可变的，只能在渲染之前设置。之后就无法更改了。

任何属性都可以设置为实例属性或在类构造函数中设置。这两种方式是等效的

// Proprty in class constructor
const dialog = new JoomlaDialog({
  textHeader: 'The header',
  popupContent: '<p class="p-3">Popup content text</p>',
});
dialog.show();

// Proprty in to class instance
const dialog = new JoomlaDialog();
dialog.textHeader = 'The header';
dialog.popupContent = '<p class="p-3">Popup content text</p>';
dialog.show();

按钮示例

dialog.popupButtons = [
  { label: 'Yes', onClick: () => dialog.destroy() },
  { label: 'No', onClick: () => dialog.destroy(), className: 'btn btn-outline-danger ms-2' },
  { label: 'Click me', onClick: () => dialog.destroy(), location: 'header' },
];

方法

show() 显示对话框。如果对话框之前未附加到 DOM，则会将其附加到 DOM。
close() 关闭对话框。
destroy() 销毁对话框。
getBody() 返回对话框主体元素。
getBodyContent() 返回内容元素。对于 inline 和 ajax 类型，将返回 popupContent，对于 iframe 类型，将返回 HTMLIframeElement，对于 image 类型，将返回 HTMLImageElement。
getHeader() 返回对话框的标题部分（如果可用）。
getFooter() 返回对话框的页脚部分（如果可用）。

静态方法

JoomlaDialog.alert(text) 显示一个文本对话框，带有一个“确定”按钮。返回一个 Promise，当用户关闭对话框时解析。
JoomlaDialog.confirm(text) 显示一个文本对话框，带有一个“是/否”按钮。返回一个 Promise，当用户点击其中一个按钮时解析，结果为 true 或 false。

事件

joomla-dialog:open 当对话框打开时触发。
joomla-dialog:close 当对话框关闭时触发。
joomla-dialog:load 当内容加载完毕时触发。

const dialog = new JoomlaDialog({
  popupContent: '<p class="p-3">Popup content text</p>',
});
dialog.addEventListener('joomla-dialog:open', () => {
    console.log('Dialog is opened!');
});
dialog.addEventListener('joomla-dialog:close', () => {
    console.log('Dialog is closed!');
});
dialog.addEventListener('joomla-dialog:load', () => {
    console.log('Dialog content is loaded!');
});
dialog.show();

使用示例

使用 $wa->useScript('joomla.dialog') 启用资源。

import JoomlaDialog from 'joomla.dialog';

// Inline 
const dialog = new JoomlaDialog({
  textHeader: 'The header',
  popupContent: '<p class="p-3">Popup content text</p>',
});
dialog.show();

// IFrame
const dialog = new JoomlaDialog({
  popupType: 'iframe',
  textHeader: 'The header',
  src: 'index.php?option=com_content&view=articles&tmpl=component&layout=modal',
});
dialog.show();

// Ajax
const dialog = new JoomlaDialog({
  popupType: 'ajax',
  textHeader: 'The header',
  src: 'index.php?option=com_content&view=articles&tmpl=component&layout=modal',
});
dialog.show();

// Image
const dialog = new JoomlaDialog({
  popupType: 'image',
  src: 'images/headers/walden-pond.jpg',
});
dialog.show();

Alert 和 Confirm 的使用：

import JoomlaDialog from 'joomla.dialog';

// Alert
JoomlaDialog.alert('Chase ball of string eat plants, meow')
  .then(() => { 
    console.log('All done'); 
  });

// Confirmation
JoomlaDialog.confirm('Cheese on toast airedale the big cheese?')
  .then((result) => { 
    console.log(result ? 'Okay' : 'Not okay'); 
  });

对话框自动创建

绑定按钮/锚点以进行基本操作。该资源允许为基本需求创建对话框，而无需使用额外的 JavaScript。

使用 $wa->useScript('joomla.dialog-autocreate') 启用资源。

按钮属性：

data-joomla-dialog 指示该元素用于 joomla.dialog-autocreate。可以为空或包含 JoomlaDialog 参数的 JSON 字符串。
data-joomla-dialog-cache 当存在该属性时，对话框将被缓存，并且不会在关闭时销毁。任何以后的点击都将打开相同的对话框，而不是创建一个新的对话框。
data-reload-on-close 当存在该属性时，脚本将在对话框关闭后重新加载页面。
data-close-on-message 当存在该属性时，脚本将在收到其窗口（来自 postMessage()）的任何消息时关闭对话框。
data-checkin-url 当存在该属性并包含一个值时，脚本将在对话框关闭后向给定 URL 执行 POST 请求。这对于带有内容编辑功能的对话框的 checkin 操作很有用。

自动创建示例

<button class="btn btn-primary" type="button"
    data-joomla-dialog='{"popupType": "iframe", "width":"80vw", "height": "80vh", "src":"index.php?option=com_content&view=articles&tmpl=component&layout=modal"}'>Click</button>

<button class="btn btn-primary" type="button"
    data-joomla-dialog='{"popupType": "inline", "src":"#popupText", "width": "fit-content", "height": "fit-content"}'>Click</button>

<a href="index.php?option=com_content&view=articles&tmpl=component&layout=modal"
  data-joomla-dialog class="btn btn-outline-primary">Click</a>

<a href="#popupText" data-joomla-dialog class="btn btn-outline-primary">Click</a>

<template id="popupText"><p class="p-3">Popup content text</p></template>

属性​

方法​

静态方法​

事件​

使用示例​

Alert 和 Confirm 的使用：​

对话框自动创建​

按钮属性：​

自动创建示例​

属性

方法