20 Modal Dialog Appearance Effects – xdialog

Category: Javascript , Modal & Popup | June 5, 2019
Author: xxjapp
Views Total: 468
Official Page: Go to website
Last Update: June 5, 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: function(param) {
        console.info('beforecreate', param);
    },
    aftercreate: function(param) {
        console.info('aftercreate', param);
    },
    beforeshow: function(param) {
        console.info('beforeshow', param);
    },
    aftershow: function(param) {
        console.info('aftershow', param);
    },
    beforehide: function(param) {
        console.info('beforehide', param);
    },
    afterhide: function(param) {
        console.info('afterhide', param);
    },
    onok: function(param) {
        console.info('onok', param);
    },
    oncancel: function(param) {
        console.info('oncancel', param);
    },
    ondelete: function(param) {
        console.info('ondelete', param);
    },
    ondestroy: function(param) {
        console.info('ondestroy', param);
    },
    ondrag: function(element, destElement, srcElement) {
        console.info('ondrag', element, destElement, srcElement);
    },

});

More API methods.

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

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

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

// displays a warning dialog
myDialog.warn(text, options)

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

// displays a fatal error dialog
myDialog.fatal(text, 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.3.0 (06/05/2019)

  • add api xdialog.error()
  • add api xdialog.info() & xdialog.warn()
  • add option timeout to close dialog automatically
  • fix problem when adjusting/dragging dialog

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