20 Modal Dialog Appearance Effects – xdialog

Category: Javascript , Modal & Popup | April 16, 2019
Author: xxjapp
Views Total: 216
Official Page: Go to website
Last Update: April 16, 2019
License: MIT

Preview:

20 Modal Dialog Appearance Effects – xdialog

Description:

xdialog is a JavaScript library to create modern alert/confirm modal popups with 20 cool appearance effects using CSS3 transitions and transforms.

Inspired by codrops’ Nifty Modal Window Effects.

More features:

  • Supports iframe content such as Youtube videos.
  • Callback functions.
  • Drag and drop.
  • Useful API methods.
  • Loading spinner included.

How to use it:

Insert the Stylesheet xdialog.css and JavaScript xdialog.js into the html file.

<link rel="stylesheet" href="xdialog/xdialog.css"/>
<script src="xdialog/xdialog.js"></script>

Create a new modal dialog.

let myDialog = xdialog.create({
    title: 'Hello dialog',
    body: '<p>Dialog body</p>'
});

Show the modal dialog.

myDialog.show();

Hide the modal dialog.

myDialog.hide();

Customize the action buttons displayed at the bottom of the modal dialog.

let myDialog = xdialog.create({

    // or
    // {
    //    ok: {
    //      name: 'Ok',
    //      style: 'background:#f44336;'
    //    },
    //    delete: 'Delete',
    //    cancel: 'Cancel',
    //    other: '<button id="my-button-id" class="my-button-class">Button-text</button>'
    // }
    buttons: ['ok', 'cancel']
    
});

Change the appearance effects:

  1. fade_in_and_scale
  2. slide_in_right
  3. slide_in_bottom
  4. newspaper
  5. fall
  6. side_fall
  7. sticky_up
  8. 3d_flip_horizontal
  9. 3d_flip_vertical
  10. 3d_sign
  11. super_scaled
  12. just_me
  13. 3d_slit
  14. 3d_rotate_bottom
  15. 3d_rotate_in_left
  16. blur
  17. let_me_in
  18. make_way
  19. slip_from_top
let myDialog = xdialog.create({

    effect: 'fade_in_and_scale'

});

Enable/disable the modal mode.

let myDialog = xdialog.create({

    modal: true

});

Add extra CSS styles to the modal dialog.

let myDialog = xdialog.create({

    style: ''

});

Fix dialog blur for chrome browser.

let myDialog = xdialog.create({

    fixChromeBlur: true

});

Callback functions. Possible parameters:

  • id: element ID
  • element: dialog element
  • dialog: dialog instance
  • overlay: overlay element
  • event: event
  • destElement: element to drag
  • srcElement: element to drag on
let myDialog = xdialog.create({

    beforecreate: null,
    aftercreate: null,
    beforeshow: null,
    aftershow: null,
    onok: null,
    oncancel: null,
    ondelete: null,
    ondestroy: null,
    ondrag: null

});

More API methods.

// displays an alert dialog
myDialog.alert(text, options)

// displays a confirm dialog
myDialog.confirm(text, onyes, options)

// access all dialog instances
myDialog.dialogs()

// starts spin animation
myDialog.startSpin()

// stops spin animation
myDialog.stopSpin()

// destroys the instance
myDialog.destroy()

// hide & destroy
myDialog.close()

// adjusts the dialog
myDialog.adjust()

// fixes chrome blur
myDialog.fixChromeBlur()

Changelog:

v3.2.0 (04/16/2019)

  • add xdialog.fatal() to show fatal error message
  • add callbacks beforehide & afterhide
  • add option extraClass to customize xdialog
  • use auto width for xdialog
  • bug/UI fixes & improvements

04/15/2019

  • add xd-body-inner to let xd-body padding work correctly and improve scrollbar UI

04/02/2019

  • Support inline source with options.body.src

03/26/2019

  • Fixed for IE
  • Do not start drag when click on inputs, buttons, selects and textareas

You Might Be Interested In:


2 thoughts on “20 Modal Dialog Appearance Effects – xdialog

  1. Hrvoje Voda

    I’m trying to use this dialog but I don’t know where to put my div with data?
    This body function is for that purpose I think but how to use it?

    And also when I call hide on my div it doesn’t hide.

    Reply

Leave a Reply