Bootstrap de BootstrapDialog

Bootstrap Bootstrapdialog

Haz uso del modal de Bootstrap más amigable con los monos.


Dirección de referencia: http://nakupanda.github.io/bootstrap3-dialog/

Marco de conchas modales:



|_+_| |_+_| |_+_|

Ejemplos de




Más simple

Mostrar solo proporcionar información y mantener todo lo demás predeterminado.



|_+_|

Título del cuadro de diálogo

|_+_||_+_|

Título del diálogo operativo

|_+_||_+_|

Información del diálogo de acción

|_+_||_+_|

Cargar una página remota (1)

|_+_|

Cargar una página remota (2)

|_+_|

Botones

|_+_|

Botones de operación

Hay algunas características adicionales creadas por el botón bootstrapdialog:
$ button.toggleEnable (verdadero | falso)
$ button.enable () // equivalente a $ button.toggleEnable (verdadero)
$ button.disable () // equivalente a $ button.toggleEnable (falso)
$ button.toggleSpin (verdadero | falso)
$ button.spin () // equivalente a $ button.toggleSpin (verdadero)
$ button.stopSpin () // equivalente a $ button.toggleSpin (falso)



|_+_|

Botón de tecla de acceso rápido

Intente hacer clic en el botón de abajo.
El último botón está deshabilitado, por lo que no sucede nada cuando presiona la tecla de acceso rápido.
Tenga en cuenta que si su caja tiene algunos componentes que requieren un teclado, puede producirse un conflicto, puede probar con el siguiente ejemplo.

|_+_|

Crear una instancia de diálogo

BootstrapDialog.show (...) es solo un atajo, si necesita una instancia de diálogo, use el 'nuevo'.

|_+_|

De hecho BootstrapDialog.show (...) también volverá a la instancia de diálogo creada.

|_+_|

Botón con identificador

|_+_|

Caja grande

De forma predeterminada, el tamaño del cuadro de diálogo es 'tamaño normal' o BootstrapDialog.SIZE_NORMAL, pero puede establecer las opciones 'tamaño' de 'tamaño grande' o BootstrapDialog.SIZE_LARGE.

|_+_|

Más tamaños de diálogo

Tenga en cuenta que especificar BootstrapDialog.SIZE_WIDE es igual a usar la clase css 'modal-lg' en Bootstrap Modal.

|_+_|

Más información

bootstrapdialog admite la visualización de contenido enriquecido, por lo que incluso puede usar un videoclip del mensaje de su cuadro de diálogo.

|_+_|

Diálogo que se puede cerrar / no cerrar

Si la opción 'closable' se establece en false, los comportamientos de cierre predeterminados se desactivarán, pero aún puede cerrar el cuadro de diálogo utilizando dialog.close ().

|_+_|

Más cerrar los controles del cuadro de diálogo

De forma predeterminada, cuando selecciona'Cerrable' establecido en verdadero, el cuadro de diálogo se puede cerrar de estas formas: Haga clic en el cuadro de diálogo, presione ESC, haga clic en el icono de cierre en el lado derecho del título del cuadro de diálogo.

Si desea que se cierre el cuadro de diálogo, se hace clic en el título del icono de cierre del cuadro de diálogo, la opción para establecer 'closeByBackdrop' y 'closeByKeyboard' es falsa.

|_+_|

Confirmar

|_+_|

Confirmar con devolución de llamada

|_+_|

Opciones Disponibles


Tenga en cuenta que todas las opciones que se describen a continuación son Opcional , pero tendrá un cuadro de diálogo extraño si ni siquiera le da un mensaje para mostrar.
La mayoría de las opciones se pueden configurar a través de opciones de inicio o establecedores de propiedades.

Opción Valores posibles Descripción
escribe BootstrapDialog.TYPE_DEFAULT o 'tipo predeterminado'
BootstrapDialog.TYPE_INFO o 'tipo-información'
BootstrapDialog.TYPE_PRIMARY o 'type-primary' (predeterminado)
BootstrapDialog.TYPE_SUCCESS o 'tipo-éxito'
BootstrapDialog.TYPE_WARNING o 'advertencia de tipo'
BootstrapDialog.TYPE_DANGER o 'tipo-peligro'
Dale a tu diálogo un aspecto específico, el esquema de color se puede ver en Botón de Bootstrap .
Talla BootstrapDialog.SIZE_NORMAL o 'tamaño normal' (predeterminado)
BootstrapDialog.SIZE_WIDE o 'tamaño ancho'
BootstrapDialog.SIZE_LARGE o 'tamaño grande'
-
cssClass - Clases CSS adicionales que se agregarán a su diálogo.
título Cadena u objeto (html) -
mensaje Cadena u objeto (html) -
botones formación Ejemplos: Dialog pop-up layer:
identificación : opcional, si se establece id, puede usar dialogInstance.getButton (id) para obtener el botón más tarde.
icono : opcional, si se establece, el icono especificado se agregará al botón.
cssClass : clase css adicional opcional que se agregará al botón.
autospin : opcional, si es cierto, después de hacer clic en el botón aparece un icono giratorio.
acción : opcional, si se proporciona, la devolución de llamada se invocará después de hacer clic en el botón y la instancia del diálogo se pasará a la función de devolución de llamada.
cerrable verdadero | falso Cuando se establece en cierto , puede cerrar el diálogo de la siguiente manera:
  • Hacer clic en el icono de cerrar en el encabezado del diálogo.
  • Hacer clic fuera del cuadro de diálogo.
  • Tecla ESC.
spinicon Nombre de clase de icono, por ejemplo, 'glyphicon glyphicon-check'.
El valor predeterminado es 'glyphicon glyphicon-asterisk'.
Especifique qué icono se utilizará como icono giratorio cuando el 'giro automático' del botón esté establecido en verdadero.
datos Objeto de valor-clave. Por ejemplo, {'id': '100'} Datos que se vincularán al diálogo.
en el programa función Si se proporciona, se invocará cuando aparezca el cuadro de diálogo.
onshown función Si se proporciona, se invocará cuando aparezca el cuadro de diálogo.
ocultar función Si se proporciona, se invocará cuando aparezca el cuadro de diálogo.
oculto función Si se proporciona, se invocará cuando se abra el cuadro de diálogo.
autodestroy verdadero (predeterminado) | falso Cuando sea cierto, todas las cosas modales se eliminarán del árbol DOM después de que se abra el cuadro de diálogo, configúrelo en falso si necesita que sus cachorros de diálogo (la misma instancia) suban y bajen una y otra vez.
descripción Cuerda Si se proporciona, el atributo 'aria-describedby' se agregará al cuadro de diálogo con la cadena de descripción como su valor. Esto puede mejorar la accesibilidad, ya que los lectores de pantalla pueden leer la descripción.
nl2br verdadero | falso Convierta automáticamente el carácter de salto de línea a
si se establece en verdadero, todo se mantiene original si es falso.

Métodos disponibles


Método Descripción
abierto() Abra el cuadro de diálogo. Uso: dialogInstance.open ()
cerrar() Cierre el cuadro de diálogo. Uso: dialogInstance.close ()
getModal () Devuelve el modal sin procesar, equivalente a $ ('')
getModalDialog () Devuelve el diálogo modal sin formato.
getModalContent () Devuelve el contenido modal sin procesar.
getModalHeader () Devuelve el encabezado modal sin procesar.
getModalBody () Devuelve el cuerpo modal crudo.
getModalFooter () Devuelve el pie de página modal sin formato.
getData (clave) Obtiene la entrada de datos de acuerdo con la clave dada, devuelve nulo si no se encuentra ninguna entrada de datos.
setData (clave, valor) Enlazar la entrada de datos a la instancia de diálogo, el valor puede ser cualquier tipo que admita javascript.
enableButtons (booleano) Deshabilite todos los botones en el pie de página del diálogo cuando sea falso, habilite todos cuando sea verdadero.
setClosable (booleano) Cuando se establece en verdadero (predeterminado), el cuadro de diálogo se puede cerrar haciendo clic en el icono de cierre en el encabezado del cuadro de diálogo, o haciendo clic fuera del cuadro de diálogo, o presionando la tecla ESC.
darse cuenta() Llamar a dialog.open () automáticamente hará que se llame a este método primero, pero si desea hacer algo en su diálogo antes de que se muestre, puede llamar manualmente a dialog.realize () antes de llamar a dialog.open ().

Ve al proyecto. | Contáctame si puede ayudar a mejorar esta página de ejemplo.