Discuz!开发之js弹出框函数showDialog介绍

xiao9469 · 发表于 2023-5-30 22:38:47

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

Discuz!开发之js弹出框函数showDialog介绍
参数意义：

showDialog(msg, mode, t, func, cover)

msg：内容，支持html

mode：提升模式，从函数里面看，支持'confirm'(显示确定，取消按钮), 'notice'(显示确定按钮), 'info'(只有内容，除了关闭标志，没有任何按钮)，这几个mod如果没有被定义，默认使用alert，也就是错误提示，显示一个X再加一个确定按钮

t：也就是title，留空会使用“提示信息”着四个字

func：点击fwin_dialog_submit，也就是确定按钮的时候执行的动作,如果用typeof 检查结果是一个函数，就执行之，不用请填写NULL

cover：使用背景遮罩

使用实例：

<div id=”divajax”></div>

<p><a href=”result.php” οnclick=”showWindow('test',this.href);return false;”>显示一个浮动窗口来返回ajax结果，这里用到了showWindow函数</a></p>

<a  href=”javascript:;” οnclick=”showDialog('演示document.write()！', 'confirm', '演示', 'document.write (\'演示document.write()\')',1)”>document.write</a>

<a  href=”javascript:;” οnclick=”showDialog('演示location.href()！', 'confirm', '演示', 'parent.location.href=\'http://g.cn\”,1)”>location.href</a>

<a  href=”javascript:;” οnclick=”showDialog('演示ajaxget(),输出到id=divajax的这一层里面', 'confirm', '演示', 'ajaxget(\'result.php?\',\'divajax\')', 1)”>ajaxget</a>

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 2025-3-17 14:20:00

`showDialog` 是 Discuz! 中常用的 JavaScript 函数之一，用于在页面上弹出对话框。这个函数非常灵活，可以根据不同的需求显示不同类型的对话框。下面是对 `showDialog` 函数的详细介绍和使用示例。

### 参数说明

1. **msg**:
- 类型: `String`
- 说明: 对话框的内容，支持 HTML 格式的字符串。你可以在这里传入任何你想显示的内容，比如文本、图片、链接等。

2. **mode**:
- 类型: `String`
- 说明: 对话框的模式。支持以下几种模式：
   - `'confirm'`: 显示“确定”和“取消”按钮。
   - `'notice'`: 只显示“确定”按钮。
   - `'info'`: 只显示内容，除了关闭标志外，没有任何按钮。
   - 如果未定义或传入其他值，默认使用 `alert` 模式，显示一个带有“X”标志和“确定”按钮的错误提示框。

3. **t**:
- 类型: `String`
- 说明: 对话框的标题。如果留空，默认使用“提示信息”作为标题。

4. **func**:
- 类型: `Function`
- 说明: 当用户点击“确定”按钮时执行的回调函数。如果传入的是一个函数，点击“确定”按钮后会执行该函数。如果不需要执行任何操作，可以传入 `NULL`。

5. **cover**:
- 类型: `Boolean`
- 说明: 是否使用背景遮罩。如果设置为 `true`，对话框弹出时会在页面背景上添加一层半透明的遮罩，防止用户操作页面其他部分。

### 使用示例

#### 1. 显示一个简单的提示框

showDialog('这是一个简单的提示框', 'notice', '提示');

复制代码

这个示例会显示一个带有“确定”按钮的提示框，标题为“提示”，内容为“这是一个简单的提示框”。

#### 2. 显示一个确认框

showDialog('你确定要执行此操作吗？', 'confirm', '确认', function() {
alert('你点击了确定按钮');
});

复制代码

这个示例会显示一个带有“确定”和“取消”按钮的确认框。如果用户点击“确定”按钮，会弹出一个提示框显示“你点击了确定按钮”。

#### 3. 显示一个信息框

showDialog('这是一个信息框，没有按钮', 'info', '信息');

复制代码

这个示例会显示一个没有按钮的信息框，只有内容和关闭标志。

#### 4. 使用背景遮罩

showDialog('这是一个带有背景遮罩的提示框', 'notice', '提示', null, true);

复制代码

这个示例会显示一个带有背景遮罩的提示框，用户无法操作页面其他部分，直到关闭对话框。

### 结合 AJAX 使用

`showDialog` 函数通常与 AJAX 请求结合使用，用于显示从服务器返回的结果。例如：

function fetchData() {
// 模拟一个 AJAX 请求
setTimeout(function() {
var response = '这是从服务器返回的数据';
showDialog(response, 'notice', 'AJAX 结果');
}, 1000);
}
fetchData();

复制代码

在这个示例中，`fetchData` 函数模拟了一个 AJAX 请求，1秒后返回数据并显示在对话框中。

### 总结

`showDialog` 是 Discuz! 中非常实用的一个函数，能够帮助开发者快速实现各种类型的对话框。通过合理使用 `mode`、`func` 和 `cover` 等参数，可以满足不同的交互需求。希望这些示例能帮助你更好地理解和使用 `showDialog` 函数。

如果你有更多关于 Discuz! 开发的问题，欢迎随时提问！
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。