web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
弹出层
20种炫酷打开模态窗口动画特效插件xdialog
分类:
弹出层
日期:
2024-05-14
点击(1)
评论(0)
演 示
免费下载
简介
在页面中引入xdialog.css和xdialog.js文件。 ```html
``` ##### 创建模态窗口 ```html let dialog1 = xdialog.open(); dialog1.close(); let dialog2 = xdialog.create({title: 'Hello dialog'}); dialog2.show(); dialog2.hide(); dialog2.destroy(); ``` ##### 配置参数 xdialog.js插件的可用配置参数有: ```javascript // dialog title // use null value to remove title title: 'Dialog Title', // dialog body // use null value to remove body body: '
Dialog body
', // dialog buttons, // // valid values: // - array // - predefined button name or user defined button html like // ['ok', 'cancel', 'delete', '
Button-text
'] // - 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-text
' // } 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 ------------ ```javascript - 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 ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告