20种炫酷窗口动画特效插件xdialog

20种炫酷窗口动画特效插件xdialog

xdialog是一款炫酷打开模态窗口动画特效插件。该插件提供20种打开模态窗口的动画特效,并提供丰富的配置参数和api来控制模态窗口,非常实用。

使用方法
在页面中引入xdialog.css和xdialog.js文件。

1
2
<link rel="stylesheet" href="xdialog/xdialog.css" />
<script src="xdialog/xdialog.js"></script>

创建模态窗口

1
2
3
4
5
6
7
let dialog1 = xdialog.open();
dialog1.close();
 
let dialog2 = xdialog.create({title: 'Hello dialog'});
dialog2.show();
dialog2.hide();
dialog2.destroy();

配置参数
xdialog.js插件的可用配置参数有:

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
// dialog title
// use null value to remove title
title: 'Dialog Title',
 
// dialog body
// use null value to remove body
body: '<p>Dialog body</p>',
 
// dialog buttons,
//
// valid values:
// - array
//  - predefined button name or user defined button html like
//  ['ok', 'cancel', 'delete', '<button id="my-button-id" class="my-button-class">Button-text</button>']
// - object
//  - button name to button text(predefined) or button html(user defined) or attribute object map like
// {
//     ok: {
//         name: '删除',
//         style: 'background:#f44336;'
//     },
//     delete: '删除',
//     cancel: '取消',
//     other: '<button id="my-button-id" class="my-button-class">Button-text</button>'
// }
buttons: ['ok', 'cancel'],
 
// dialog extra style
// for example 'width: auto;'
style: '',
 
// dialog show/hide effect, one of the following values
// - fade_in_and_scale'
// - slide_in_right'
// - slide_in_bottom'
// - newspaper'
// - fall'
// - side_fall'
// - sticky_up'
// - 3d_flip_horizontal'
// - 3d_flip_vertical'
// - 3d_sign'
// - super_scaled'
// - just_me'
// - 3d_slit'
// - 3d_rotate_bottom'
// - 3d_rotate_in_left'
// - blur'
// - let_me_in'
// - make_way'
// - slip_from_top'
//
// use null value to disable effect
effect: 'fade_in_and_scale',
 
// fix dialog blur for chrome browser with/without transform and/or with/without perspective
//
// true: to fix
// false: not to fix
//
fixChromeBlur: true,
 
// modal or not
modal: true,
 
// callback before show
beforeshow: null,
 
// callback after show
aftershow: null,
 
// callback when OK button pressed
// return false to avoid to be closed
onok: null,
 
// callback when Cancel button pressed
// return false to avoid to be closed
oncancel: null,
 
// callback when Delete button pressed
// return false to avoid to be closed
ondelete: null,
 
// callback when dialog is about to be destroyed
// return false to avoid to be destroyed
ondestroy: null,

其中effect参数可以配置模态窗口的显示动画效果,可用的配置动画项有:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    fade_in_and_scale
    slide_in_right
    slide_in_bottom
    newspaper
    fall
    side_fall
    sticky_up
    3d_flip_horizontal
    3d_flip_vertical
    3d_sign
    super_scaled
    just_me
    3d_slit
    3d_rotate_bottom
    3d_rotate_in_left
    blur
    let_me_in
    make_way
    slip_from_top

API

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
43
44
- xdialog.init(options)
// initialize xdialog
 
- xdialog.create(options)
// create a dialog
 
- xdialog.open(options)
// create a dialog and show it
 
- xdialog.alert(text, options)
// create an alert dialog and show it
 
- xdialog.confirm(text, onyes, options)
// create a confirm dialog and show it
 
- xdialog.dialogs()
// access all dialog instances
 
- xdialog.startSpin()
// start spin animation
 
-  xdialog.stopSpin()
// stop spin animation
 
- dialog.element()
// dialog html element
 
- dialog.show()
// show dialog
 
- dialog.hide()
// hide dialog
 
- dialog.destroy()
// destroy dialog
 
- dialog.close()
// hide dialog and destory it
 
- dialog.adjust()
// adjust dialog to make whole dialog visible
 
- dialog.fixChromeBlur()
// fix chrome blur
当前内容只有登录了才能查看,如果您已经注册,请登录
2

发表评论