20 efectos de apariencia de cuadro de diálogo modal-Xdialog

Vista prévia

Descripción

Xdialog es una librería JavaScript para crear alertas modernas de alerta/confirmación con 20 efectos de apariencia geniales usando transiciones y transformaciones CSS3.

Inspirado por las Cogotas ' efectos de ventana modal Nifty .

Más características

• Soporta contenido iframe como vídeos de YouTube.
• Funciones de devolución de llamada.
• Arrastra y suelta.
• Métodos de API útiles.
• Spinner de carga incluido.

Funcionamiento

Inserte el Stylesheet de Xdialog.CSS y JavaScript Xdialog. js en el archivo HTML.

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

Cree un nuevo cuadro de diálogo modal.

let myDialog = xdialog.create({


title: 'Hello dialog',


body: '<p>Dialog body</p>'
});

Mostrar el cuadro de diálogo modal.

myDialog.show();

Oculte el diálogo modal.

myDialog.hide();

Personalice los botones de acción que se muestran en la parte inferior del cuadro de diálogo modal.

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']



});

Cambiar los efectos de apariencia:

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'

});

Activar/desactivar el modo modal.

let myDialog = xdialog.create({



modal: true

});

Agregue estilos CSS adicionales al cuadro de diálogo modal.

let myDialog = xdialog.create({



style: ''

});

Corregir el desenfoque del diálogo para el navegador Chrome.

let myDialog = xdialog.create({



fixChromeBlur: true

});

Funciones de devolución de llamada. Parámetros posibles:

• ID: ID de elemento
• elemento : elemento de diálogo
• Dialog: instancia de diálogo
• Overlay: elemento de superposición
• evento : evento
• destElement: elemento para arrastrar
• srcElement: elemento que se arrastra en

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()

Registro de cambios

v3.2.0 (04/16/2019)

• Agregar Xdialog. fatal () para mostrar un mensaje de error fatal
• Agregar devoluciones llamada antesocultar & afterhide
• Añadir la opción extraClass para personalizar Xdialog
• utilizar el ancho automático para Xdialog
• Bug/UI corrige & mejoras

04/15/2019

• Añadir xD-Body-interior para permitir que el relleno xD-Body funcione correctamente y mejorar la interfaz de usuario de la barra de desplazamiento

04/02/2019

• Apoye el source en línea con Options. Body. src

03/26/2019

• Corregido para IE
• No empiece a arrastrar cuando haga clic en entradas, botones, selecciones y textareas