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

ventana modal javascript

Question

Si voy aquí

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

Y haga clic en ''Iniciar demo modal'' hace lo esperado. Estoy usando el modal como parte de mi proceso de registro y existe una validación del lado del servidor. Si hay problemas, quiero redirigir al usuario al mismo modal con mis mensajes de validación. Por el momento, no puedo encontrar la forma de mostrar el modal para que no sea un clic físico del usuario. ¿Cómo puedo lanzar el modelo programáticamente?

Answer 1

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

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

y esconderse con:

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

Answer 2

Para mostrar manualmente el menú emergente modal debes hacer esto

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

Inicialmente debe 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.

Answer 3

Quería hacer esto de forma 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 a tener en cuenta :

• visible es una variable (booleana) en el componente que gobierna la visibilidad modal.
• show y in son clases de arranque.

Answer 4

Si está buscando una creación modal programática, le puede encantar 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, aún necesita escribir marcas HTML en modal primero.

Answer 5

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

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

Demostración: here

o simplemente puedes eliminar la clase "ocultar"

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

1.

Answer 6

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