# 弹窗

TIP

窗口支持快捷键 esc 关闭

# API

Eadmin.window

参数 说明 类型 默认值
dom 需要点击打开弹窗的dom,例如:'#p1', '.p1'等等,在其上增加属性 data-window-url 来指定打开弹窗的地址 string -
param 参数列表 object -

# param参数内容

参数 说明 类型 默认值
title 窗口标题 string -
refresh 是否每次打开弹窗都刷新页面 boolean false
model 弹窗加载模式 iframe, load string load
width 宽度,支持百分比,例如:'80%' number/string 400
height 高度,支持百分比,例如:'80%' number/string 400
drag 是否可以拖动 boolean true
btn 按钮栏 array []
close 窗口关闭时的回调 function -

# 默认弹窗

<button id="p1" data-window-url="./demo.html">打开弹窗</button>
<script>
    (() => {
        Eadmin.window('#p1');
    })();
</script>
1
2
3
4
5
6

# 每次打开都刷新

<button id="p1" data-window-url="./demo.html">打开弹窗</button>
<script>
    (() => {
        Eadmin.window('#p1', {
            refresh : true
        });
    })();
</script>
1
2
3
4
5
6
7
8

# 禁止拖动

<button id="p1" data-window-url="./demo.html">打开弹窗</button>
<script>
    (() => {
        Eadmin.window('#p1', {
            drag : false
        });
    })();
</script>
1
2
3
4
5
6
7
8

# 自定义宽度高度

<button id="p1" data-window-url="./demo.html">打开弹窗</button>
<script>
    (() => {
        Eadmin.window('#p1', {
            width : '80%',
            height : '80%'
        });
    })();
</script>
1
2
3
4
5
6
7
8
9

# iframe模式加载内容

<button id="p1" data-window-url="./demo.html">打开弹窗</button>
<script>
    (() => {
        Eadmin.window('#p1', {
            model : 'iframe'
        });
    })();
</script>
1
2
3
4
5
6
7
8

# 带按钮栏的窗口

按钮配置参数如下:

参数 说明 类型 默认值
name 按钮名称,例如:确定、取消,等等 string -
highlight 按钮是否高亮 boolean false
action 点击后执行的动作,框架内置了3种常用动作,取消 cancel, 刷新窗口 refresh, 提交 submit,也可以自行编写回调函数 string/function -
before 如果 actionsubmit,则此项会指定提交表单前的前置动作 function -
refresh_on_close 点击按钮后在关闭窗口时是否自动刷新一次父页面 boolean false

TIP

注意,按钮动作如果是 cancel 则关闭窗口时不会触发窗口关闭回调

<button id="p1" data-window-url="./demo.html">打开弹窗</button>
<script>
    (() => {
        Eadmin.window('#p1', {
            // 按钮栏
            btn : [
                {
                    // 按钮名称
                    name : '取消',
                    // 执行的动作
                    action : 'cancel'
                },
                {
                    // 按钮名称
                    name : '确定',
                    // 按钮是否高亮
                    highlight : true,
                    // 执行的动作
                    action  : 'submit',
                    // 窗口关闭后是否刷新页面
                    refresh_on_close : true
                }
            ]
        });
    })();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

个别情况下按钮点击后执行的功能需要自定义,可以直接在 action 上指定即可,自定义的动作参数里会注入一个 obj 对象,其中包含2个方法,closerefresh,用来执行完操作后对窗口的简单操作

<button id="p1" data-window-url="./demo.html">打开弹窗</button>
<script>
    (() => {
        Eadmin.window('#p1', {
            // 按钮栏
            btn : [
                {
                    // 按钮名称
                    name : '取消',
                    // 执行的动作
                    action : 'cancel'
                },
                {
                    // 按钮名称
                    name : '确定',
                    // 按钮是否高亮
                    highlight : true,
                    // 自定义动作
                    action  : (obj) => {
                        // 处理完后关闭窗口
                        obj.close();
                        // 处理完后刷新窗口
                        obj.refresh();
                    }},
                    // 窗口关闭后是否刷新页面
                    refresh_on_close : true
                }
            ]
        });
    })();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

TIP

如果 actionsubmit,则会提交POST请求到打开的窗口内的 form 表单指定的 action 参数上,如果 form 上没有指定 action,则提交到弹窗页面

<!-- 
    demo.html的内容如下,如果指定了action参数,
    则会以POST方式提交到action指向的地址上 
-->
<form action="submit.html">
    <input name="name">
</form>

<!-- 
    demo.html的内容如下,如果不指定action参数,
    则会以POST方式直接提交到窗口打开的地址上,本例中也就是 demo.html 
-->
<form>
    <input name="name">
</form>

<button id="p1" data-window-url="./demo.html">打开弹窗</button>
<script>
    (() => {
        Eadmin.window('#p1', {
            // 按钮栏
            btn : [
                {
                    // 按钮名称
                    name : '取消',
                    // 执行的动作
                    action : 'cancel'
                },
                {
                    // 按钮名称
                    name : '确定',
                    // 按钮是否高亮
                    highlight : true,
                    // 自定义动作
                    action  : 'submit',
                    // 窗口关闭后是否刷新页面
                    refresh_on_close : true
                }
            ]
        });
    })();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

WARNING

有些场景下希望提交表单前做一些自己业务上的处理,这时可以指定 before 参数

<!-- 弹窗页面demo.html的HTML -->
<form>
    <input name="name">
</form>
<script>
    // 定义前置执行的方法,会注入一个回调函数
    // 在自己的业务执行完成后,执行callback()即可
    Method.before = (callback) => {
        // 自己的业务逻辑处理
        console.log(1);
        // 执行回调
        callback();
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<button id="p1" data-window-url="./demo.html">打开弹窗</button>
<script>
    (() => {
        Eadmin.window('#p1', {
            // 按钮栏
            btn : [
                {
                    // 按钮名称
                    name : '取消',
                    // 执行的动作
                    action : 'cancel'
                },
                {
                    // 按钮名称
                    name : '确定',
                    // 按钮是否高亮
                    highlight : true,
                    // 提交表单前置执行的方法名称,在弹窗页面定义
                    before : 'before',
                    // 自定义动作
                    action  : 'submit',
                    // 窗口关闭后是否刷新页面
                    refresh_on_close : true
                }
            ]
        });
    })();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 窗口关闭回调

<button id="p1" data-window-url="./demo.html">打开弹窗</button>
<script>
    (() => {
        Eadmin.window('#p1', {
            close : () => {
                console.log('窗口关闭了');
            }
        });
    })();
</script>
1
2
3
4
5
6
7
8
9
10