对话框/Tips

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

阿里云

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

使用方法

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

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" href="xdialog/xdialog.css" />
  2. <script src="xdialog/xdialog.js"></script>

创建模态窗口

  1. let dialog1 = xdialog.open();
  2. dialog1.close();
  3. let dialog2 = xdialog.create({title: 'Hello dialog'});
  4. dialog2.show();
  5. dialog2.hide();
  6. dialog2.destroy();

配置参数

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

  1. // dialog title
  2. // use null value to remove title
  3. title: 'Dialog Title',
  4.  
  5. // dialog body
  6. // use null value to remove body
  7. body: '<p>Dialog body</p>',
  8.  
  9. // dialog buttons,
  10. //
  11. // valid values:
  12. // - array
  13. //  - predefined button name or user defined button HTML like
  14. //  ['ok', 'cancel', 'delete', '<button id="my-button-id" class="my-button-class">Button-text</button>']
  15. // - object
  16. //  - button name to button text(predefined) or button html(user defined) or attribute object map like
  17. // {
  18. //     ok: {
  19. //         name: '删除',
  20. //         style: 'background:#f44336;'
  21. //     },
  22. //     delete: '删除',
  23. //     cancel: '取消',
  24. //     other: '<button id="my-button-id" class="my-button-class">Button-text</button>'
  25. // }
  26. buttons: ['ok', 'cancel'],
  27.  
  28. // dialog extra style
  29. // for example 'width: auto;'
  30. style: '',
  31.  
  32. // dialog show/hide effect, one of the following values
  33. // - fade_in_and_scale'
  34. // - slide_in_right'
  35. // - slide_in_bottom'
  36. // - newspaper'
  37. // - fall'
  38. // - side_fall'
  39. // - sticky_up'
  40. // - 3d_flip_horizontal'
  41. // - 3d_flip_vertical'
  42. // - 3d_sign'
  43. // - super_scaled'
  44. // - just_me'
  45. // - 3d_slit'
  46. // - 3d_rotate_bottom'
  47. // - 3d_rotate_in_left'
  48. // - blur'
  49. // - let_me_in'
  50. // - make_way'
  51. // - slip_from_top'
  52. //
  53. // use null value to disable effect
  54. effect: 'fade_in_and_scale',
  55.  
  56. // fix dialog blur for chrome browser with/without transform and/or with/without perspective
  57. //
  58. // true: to fix
  59. // false: not to fix
  60. //
  61. fixChromeBlur: true,
  62.  
  63. // modal or not
  64. modal: true,
  65.  
  66. // callback before show
  67. beforeshow: null,
  68.  
  69. // callback after show
  70. aftershow: null,
  71.  
  72. // callback when OK button pressed
  73. // return false to avoid to be closed
  74. onok: null,
  75.  
  76. // callback when Cancel button pressed
  77. // return false to avoid to be closed
  78. oncancel: null,
  79.  
  80. // callback when Delete button pressed
  81. // return false to avoid to be closed
  82. ondelete: null,
  83.  
  84. // callback when dialog is about to be destroyed
  85. // return false to avoid to be destroyed
  86. 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

  1. - xdialog.init(options)
  2. // initialize xdialog
  3.  
  4. - xdialog.create(options)
  5. // create a dialog
  6.  
  7. - xdialog.open(options)
  8. // create a dialog and show it
  9.  
  10. - xdialog.alert(text, options)
  11. // create an alert dialog and show it
  12.  
  13. - xdialog.confirm(text, onyes, options)
  14. // create a confirm dialog and show it
  15.  
  16. - xdialog.dialogs()
  17. // access all dialog instances
  18.  
  19. - xdialog.startSpin()
  20. // start spin animation
  21.  
  22. -  xdialog.stopSpin()
  23. // stop spin animation
  24.  
  25. - dialog.element()
  26. // dialog html element
  27.  
  28. - dialog.show()
  29. // show dialog
  30.  
  31. - dialog.hide()
  32. // hide dialog
  33.  
  34. - dialog.destroy()
  35. // destroy dialog
  36.  
  37. - dialog.close()
  38. // hide dialog and destory it
  39.  
  40. - dialog.adjust()
  41. // adjust dialog to make whole dialog visible
  42.  
  43. - dialog.fixChromeBlur()
  44. // fix chrome blur

Github 网址:https://github.com/xxjapp/xdialog

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

已有 488 人购买
  • 6vpi
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!