20 Modal Dialog Appearance Effects – xdialog

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
});

Specify the timeout which can be used to close the dialog automatically.

let myDialog = xdialog.create({
    timeout: 0 // 0 = disabled
});

Enable/disable keyboard interactions.

let myDialog = xdialog.create({
    listenEnterKey: true,
    listenESCKey: 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.4.2 (04/28/2024)

• bugfix

v3.4.1 (04/13/2019)

• bugfix

v3.4.0 (08/26/2019)

• add options.body.element to support dom element
• press Enter key to simulate clicking OK
• add option listenEnterKey & listenESCKey
• other bug fixes

07/08/2019

• fix enter key event in textareas within a form

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