20种炫酷打开模态窗口动画特效插件xdialog

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

使用方法

在页面中引入xdialog.css和xdialog.js文件。

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

创建模态窗口

let dialog1 = xdialog.open();
dialog1.close();

let dialog2 = xdialog.create({title: 'Hello dialog'});
dialog2.show();
dialog2.hide();
dialog2.destroy();
                

配置参数

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

// 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参数可以配置模态窗口的显示动画效果，可用的配置动画项有：

• 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

- 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                  
                

20种炫酷打开模态窗口动画特效插件xdialog的github网址为：https://github.com/xxjapp/xdialog