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