袖白雪 发表于 2019-12-4 14:32:07

DISCUZ 前端JS showWindow函数解析,打造个性的弹窗





showWindow(k, url, mode, cache, v)

以下列表说明各个参数的含义

key默认值含义可选值及解释
k(必填)浮窗的 key

url(必填)get 方式 url 表示浮窗请求的地址 post 方式 url 表示浮窗提交的表单 id


mode'get'弹窗请求类型get: ajaxget 方式请求 url post: ajaxpost 方式请求 url

cache1是否缓存弹窗内容1:是 0:否

v
由于 showWindow() 是以 showMenu() 函数为内核,因此此处可微调 showMenu() 参数,如不指定则使用 showWindow() 的默认值


提示:
    1.同一页面同时可以弹出多个浮窗,但 k 及 url 相同的浮窗同时只能显示一个。
    2.浮窗标题区域支持拖拽。
    3.另外关闭浮窗请使用 hideWindow(k)。

    为了方便说明如何利用这个函数开发,打造个性的弹窗页面,我们来看看主题列表页发帖按钮的弹窗机制:
   
    在forumdisplay页面上的发帖按钮有一个onclick的触发点,触发的函数为showWindow('newthread', 'forum.php?mod=post&action=newthread&fid=40'),其中'newthread'是表示弹出窗口的div的id,'forum.php?mod=post&action=newthread&fid=40'表示请求的地址。

    在这个例子中,请求返回的是htm模板,值得注意的是,返回的应该是完整的模板文件,必须包含
[*]<!--{template common/header}-->

复制代码
或者
[*]<!--{template common/header_ajax}-->

复制代码
以及
[*]<!--{template common/footer}-->

复制代码
或者
[*]<!--{template common/footer_ajax}-->

复制代码
这样才能在窗口内正常显示。
   
我们来看看标准的弹窗包括三个部分:   
标题部分:

[*]<h3 class="flb">你的标题</h3>

复制代码

在标题的后面可以附上关闭窗口的代码:
[*]<span><a href="javascript:;"
[*]class="flbc" title="{lang
[*]close}">{lang close}</a></span>

复制代码
内容部分:
可以自行设计。
附上提示的代码:
[*]<div class="alert_error">提示内容</div>

复制代码
class属性为alert_right,alert_error分别对应正确和错误的图标


按钮部分:
可以自行设计。

到此为止,showWindow函数的基本的使用方法介绍完毕了,这里只是抛砖引玉,希望能为大家在discuz!的开发和学习的路上提供一些帮助~



弹窗定时关闭


这些都是在程序端的showmessage()函数控制的,showmessage($message, $url_forward = '', $values = array(), $extraparam = array(), $custom = 0),其中$extraparam以array(key => value ...)的形式,配置输出的模式。
举个例子:
实现倒数自动关闭--
showmessage('', '', '',array('showdialog' => true, 'closetime' => true));
howdialog      关闭原弹出框显示 showDialog 信息
timeout                定时跳转

页: [1]
查看完整版本: DISCUZ 前端JS showWindow函数解析,打造个性的弹窗