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

Tiempo de ejecución: 30 minutos. Empezar

Autor: xxjapp
Views Total: 187
Sitio oficial: Ir a la web
Actualizado: April 16, 2019
Licencia: MIT

Vista prévia

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

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

Te puede interesar: