¿Cómo puedo activar un modal de Bootstrap programáticamente?

Si voy aquí

Http://getbootstrap.com/2.3.2/javascript.html#modals

Y haga clic en 'Launch demo modal' hace lo esperado. Estoy usando el modal como parte de mi proceso de registro y hay validación del lado del servidor involucrado. Si hay problemas, quiero redirigir al usuario al mismo modal con mis mensajes de validación mostrados. Por el momento no puedo averiguar cómo hacer que el modal se muestre que no sea un clic físico del usuario. ¿Cómo puedo lanzar ¿el modelo programáticamente?

Author: bkwdesign, 2012-07-10
Source

6 answers

Para mostrar manualmente la ventana emergente modal tienes que hacer esto

$('#myModal').modal('show');

Previamente necesita inicializarlo con show: false para que no se muestre hasta que lo haga manualmente.

$('#myModal').modal({ show: false})

Donde myModal es el nombre del contenedor modal.

 283
Author: Claudio Redi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-12 18:08:14

No debe escribir data-toggle = "modal" en el elemento que activó el modal (como un botón), y manualmente puede mostrar el modal con: 

$('#myModal').modal('show');

Y ocultar con:

$('#myModal').modal('hide');
 41
Author: nandop,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-09-29 23:24:11

Si está buscando una creación modal programática, puede que le guste esto:

Http://nakupanda.github.io/bootstrap3-dialog /

A pesar de que el modal de Bootstrap proporciona una forma de javascript para la creación modal, todavía necesita escribir marcas html de modal primero.

 15
Author: nakupanda,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-11-13 06:06:19

HTML

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

JS

$('button').click(function(){
$('#myModal').modal('show');
});

DEMO JSFIDDLE

 8
Author: tvshajeer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-03-13 06:05:50

Puede mostrar el modelo a través de jquery (javascript)

$('#yourModalID').modal({
  show: true
})

Demo: aquí

O simplemente puede eliminar la clase "hide"

<div class="modal" id="yourModalID">
  # modal content
</div>

​

 6
Author: HaNdTriX,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-07-09 23:51:57

Quería hacer esto de la manera angular (2/4), esto es lo que hice: 

<div [class.show]="visible" [class.in]="visible" class="modal fade" id="confirm-dialog-modal" role="dialog">
..
</div>`

Cosas importantes para nota :

  • visible es una variable (booleana) en el componente que gobierna la visibilidad de modal.
  • show y in son clases bootstrap.
 1
Author: Anand Rockzz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-12 07:49:54