Descripción detallada del uso de BootstrapDialog Bootstrap

Hay dos formas de presentación

Escribir primero: primero debes incluir las bibliotecas
css : bootstrap.min.css bootstrap-diálogo.css
js : jquery-1.11.1.min.js bootstrap.min.js bootstrap-diálogo.js

1、a través del código HTML se muestra

<!-- Botón desencadenador del cuadro emergente Modal -->
<button type="button" class="btn btn-primario btn-lg" data-cambiar="modal" data-objetivo="#myModal">
  Lanzar demostración modal
</button>
<!-- Estructura del cuadro emergente Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="diálogo" aria-etiquetadocon="myModalLabel">
  <div class="modal-diálogo" role="documento">
    <div class="modal-contenido">
      <div class="modal-cabecera">
        <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Título del modal</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary">Guardar cambios</button>
      </div>
    </div>
  </div>
</div>

Este método es simple y directo; pero aumentará el 'peso' de html, y no es lo suficientemente flexible, por lo que no se recomienda su uso en gran cantidad

2、Mostrarse mediante js (los puntos a tener en cuenta se escriben en los comentarios)

(1）La manera más sencilla es:

BootstrapDialog.show({
  message: '¡Hola Manzana!'
});

También hay una manera más sencilla de hacerlo: BootstrapDialog.alert('¡Quiero plátano!'); //Carga asíncrona, adecuada para usar al final de un método

(2）buttons

BootstrapDialog.show({
  message : "message",
  buttons : [{
    label : "btn",1"
    cssClass : "btn",-primary"   //Agregar una clase al botón, se puede agregar estilo al botón de esta manera
    },{
      label : "btn",2"
      icon : "glyphicon glyphicon-ban-circle"   //Agregar un botón con icono mediante estilos de Bootstrap
    },{
      label : "btn",3"
      action : function(dialog){   //Agregar un evento de clic al botón actual
        dialog.close();
      }
    }
  ]
});

(3）El título de operación y el mensaje se pueden modificar mediante setTitle y setMessage

BootstrapDialog.show({
  title : "¡Este es un título!",    //title
  message : "Contenido del documento",
  buttons : [{
    label : "Cancelar",
    action : function(dialog){
      dialog.setTitle("title2");   //título de operación
      dialog.setMessage("message1");   //mensaje de operación
      dialog.close();
    }
  },{
    label : "Aceptar",
    action : function(dialog){
      dialog.close();
    }
  }]
})

(4）热键按钮 （我认为不常用）

BootstrapDialog.show({
  title: 'Tecla de acceso rápido de botón',
  message: 'Intenta presionar algunas teclas...',
  onshow: function(dialog) {
    dialog.getButton('button')-c').disable();   //Obtener el botón a través de getButton('id')
  },
  buttons: [{
    label: '(A) Botón A',
    hotkey: 65, // El código de la clave del evento keyup del teclado 'A' es 65.
    action: function() {
      alert('Finalmente, te gustó el Botón A.');
    }
  }, {
    label: '(B) Botón B',
    hotkey: 66,
    action: function() {
      alert('¡Hola, este es el Botón B!');
    }
  }, {
    id: 'button-c',
    label: '(C) Botón C',
    hotkey: 67,
    action: function(){
      alert('Este es el Botón C pero no verás que baile.');
    }
  }]
})

(5）Carga dinámica de message

BootstrapDialog.show({
  //message : $("<div></div>").load('content.html')   //Primera manera
  message : function(content){    //Segunda manera
    var $message = $("<div></div>");
    var loadData = content.getData("contentFile");
    $message.load(loadData);
    return $message;   //¡Recuerda devolver el valor!
  },
  data : {"contentFile" :"content.html"}
});

(6）Controlar el botón de cerrar en la esquina superior derecha del cuadro emergente

BootstrapDialog.show({
  message: '¡Hola Apple!',
  closable: true,    //Controlar si se muestra 'x' en la esquina superior derecha del cuadro emergente, por defecto es true
  buttons: [{
    label: 'Diálogo CERRABLE!',
    cssClass: 'btn-success',
    action: function(dialogRef){
      dialogRef.setClosable(true);
    }
  }, {
    
    cssClass: 'btn-warning',
    action: function(dialogRef){
      dialogRef.setClosable(false);
    }
  }, {
    label: 'Cerrar el diálogo',
    action: function(dialogRef){
      dialogRef.close();   //Siempre se puede cerrar el cuadro emergente
    }
  }]
});

(7Tamaño del cuadro emergente

BootstrapDialog.show({
  title: 'Más tamaños de diálogos',
  message: '¡Hola Apple!',
  size : BootstrapDialog.SIZE_NORMAL  //Tamaño predeterminado
  buttons: [{
    label: 'Normal',
    action: function(dialog){
      dialog.setTitle('Normal');
      dialog.setSize(BootstrapDialog.SIZE_NORMAL);
    }
  }, {
    label: 'Pequeño',
    action: function(dialog){
      dialog.setTitle('Pequeño');
      dialog.setSize(BootstrapDialog.SIZE_SMALL);
    }
  }, {
    label: 'Ancho',
    action: function(dialog){
      dialog.setTitle('Ancho');
      dialog.setSize(BootstrapDialog.SIZE_WIDE);
    }
  }, {
    label: 'Grande',
    action: function(dialog){
      dialog.setTitle('Grande');
      dialog.setSize(BootstrapDialog.SIZE_LARGE);
    }
  }]
});

Este es el contenido completo del artículo, esperamos que sea útil para su aprendizaje y que todos nos apoyen y alentemos el tutorial.

Declaración: Este artículo se ha obtenido de Internet, es propiedad del autor original, el contenido se ha contribuido y subido de manera autónoma por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no se ha realizado un procesamiento editorial manual y no asume responsabilidad por las responsabilidades legales relacionadas. Si encuentra contenido sospechoso de violación de derechos de autor, le invitamos a enviar un correo electrónico a: notice#w.3Aviso: Este contenido se ha obtenido de Internet, es propiedad del autor original, el contenido se ha subido de manera autónoma por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no se ha realizado un procesamiento editorial manual y no asume responsabilidad por las responsabilidades legales relacionadas. Si encuentra contenido sospechoso de violación de derechos de autor, le invitamos a enviar un correo electrónico a: notice#w proporcionando evidencia relevante, una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de violación de derechos de autor.