当前位置：首页 > 网页特效 > 弹出层

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

分类：弹出层日期：2024-05-14 点击(1) 评论(0)

简介

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

```html
<link rel="stylesheet" href="xdialog/xdialog.css" />
<script src="xdialog/xdialog.js"></script>  
```                
#####  创建模态窗口
```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: '<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

------------

```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   
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果