Multifuncional modal & ventana emergente-MSG

Vista prévia

Descripción

MSG es una biblioteca de JavaScript para crear y administrar ventanas modales y cuadros emergentes altamente personalizables en la Página Web. También se puede utilizar para lightbox, alertas, notificaciones, snack bars y mucho más.

¿Cómo funciona?

Instálelo con NPM.

$ npm install msg-modal

Importe el archivo JavaScript principal ' msg. js ' en el documento.

<script src="msg.js"></script>

El código JavaScript para mostrar una ventana modal básica:

msg.show('Modal content here')

Cree una ventana modal que se cierre automáticamente después de 4 segundos.

msg_autoclose.show('Modal content here');msg_autoclose.set_title("Warning")

Cree una ventana modal de pantalla completa.

msg_ox.show('Modal content here')

Cree una ventana modal que tenga un retraso de 3 segundos antes de poder cerrarla.

msg_delay.show('Modal content here')

Cambie la posición predeterminada de la ventana modal.

msg_ptop.show('Modal content here')
msg_pbottom.show('Modal content here')
msg_pleft.show('Modal content here')
msg_pright.show('Modal content here')
msg_ptleft.show('Modal content here')
msg_ptright.show('Modal content here')
msg_pbleft.show('Modal content here')
msg_pbright.show('Modal content here')

Si desea crear mensajes emergentes apilables:

var msg_pop = Msg(


{



// options here


});

Posibles opciones para la ventana emergente.

{


class: "green",

enable_overlay: false,

position: "bottomright",

remove_after_close: true,

zStack_level: 1,

window_width: "460px",

lock: false,

show_effect: "fade", // scale, slide_up, slide_down, slide_left, slide_right





show_effect_duration: 350,

close_effect: "fade", // scale, slide_up, slide_down, slide_left, slide_right




 close_effect_duration: 350 ,


}

Opciones posibles para la ventana emergente de cierre automático.

{


class: "green",

enable_overlay: false,

position: "bottomright",

autoclose: true,

enable_progressbar: true,

remove_after_close: true,

zStack_level: 1,

window_width: "460px",

lock: false,

show_effect: "fade", // scale, slide_up, slide_down, slide_left, slide_right





show_effect_duration: 350,

close_effect: "fade", // scale, slide_up, slide_down, slide_left, slide_right




 close_effect_duration: 350,


 }

Opciones posibles para el snackbar.

{


class: "black",

content_class: "snackbar",

position: "bottom",

edge_padding_y: 0,

window_min_width: "600px",

window_x: "none", // inner_right, inner-left, floating_right, floating_left

enable_overlay: false,

autoclose: true,

autoclose_delay: 10000,

close_on_show: true,

zStack_level: 1,

lock: false,

show_effect: "slide_up", // scale, slide_up, slide_down, slide_left, slide_right





show_effect_duration: 350,

close_effect: "slide_down", // scale, slide_up, slide_down, slide_left, slide_right




 close_effect_duration: 350,

sideStack = "none", // horizontal, vertical

}

Opciones posibles para la ventana modal.

{


window_height: "100vh",

window_min_height: "100vh",

window_max_height: "100vh",

window_width: "100vw",

window_min_width: "100vw",

window_max_width: "100vw",

disable_transformations: true,

disable_content_padding: true,

full_content: true,

sideStack = "none" // horizontal, vertical

}

Registro de cambios

v11.4.0 (03/12/2018)

• Mejor control de cuadro de texto para borrar y/o cerrar ventanas cuando se borran.

v11.3.0 (11/29/2018)

• Refactorización.

09/02/2018

• Portar UNIX empujando cosas

08/06/2018

• Se agregaron devoluciones de llamada