欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > jquery库 > Lightbox和对话框 > 20种炫酷打开模态窗口动画特效插件xdialog

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

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

关键词:模态窗口,对话框,模态对话框,js模态窗口插件,js模态窗口,打开模态窗口动画,js对话框,js打开模态窗口,jquery库,duihuakuang

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

简要教程

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

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/jquery_duihuakuang/9655.html

 在线演示  免费下载
编号:201904040000009655
大小:0.4MB
上传时间:2019-04-05 08:01
素材由用户"yc870311"上传分享。

标签

最新推荐素材

与20种炫酷打开模态窗口动画特效插件xdialog相关的素材

.