¿Cómo puedo activar un Bootstrap modal mediante programación?

Si voy aqui

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 hay una validación del lado del servidor involucrada. Si hay problemas, quiero redirigir al usuario al mismo modo con mis mensajes de validación mostrados. Por el momento no puedo entender cómo hacer que el modal se muestre más que un clic físico del usuario. ¿Cómo puedo iniciar el modelo mediante programación?

Para mostrar manualmente la ventana emergente modal, debe hacer esto

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

Previamente debe inicializarlo show: falsepara que no se muestre hasta que lo haga manualmente.

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

¿Dónde myModalestá la identificación del contenedor modal?

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

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

y esconderse con:

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

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, aún debe escribir primero las marcas html de modal.

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

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

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

Demostración: aquí

o simplemente puedes eliminar la clase "hide"

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

​

Quería hacer esto de la angular (2/4)manera, 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.
• showy inson clases de bootstrap.

Un componente de ejemplo y html

Componente

@ViewChild('rsvpModal', { static: false }) rsvpModal: ElementRef;
..
@HostListener('document:keydown.escape', ['$event'])
  onEscapeKey(event: KeyboardEvent) {
    this.hideRsvpModal();
  }
..
  hideRsvpModal(event?: Event) {
    if (!event || (event.target as Element).classList.contains('modal')) {
      this.renderer.setStyle(this.rsvpModal.nativeElement, 'display', 'none');
      this.renderer.removeClass(this.rsvpModal.nativeElement, 'show');
      this.renderer.addClass(document.body, 'modal-open');
    }
  }
  showRsvpModal() {
    this.renderer.setStyle(this.rsvpModal.nativeElement, 'display', 'block');
    this.renderer.addClass(this.rsvpModal.nativeElement, 'show');
    this.renderer.removeClass(document.body, 'modal-open');
  }

HTML

<!--S:RSVP-->
<div class="modal fade" #rsvpModal role="dialog" aria-labelledby="niviteRsvpModalTitle" (click)="hideRsvpModal($event)">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="niviteRsvpModalTitle">

                </h5>
                <button type="button" class="close" (click)="hideRsvpModal()" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary bg-white text-dark"
                    (click)="hideRsvpModal()">Close</button>
            </div>
        </div>
    </div>
</div>
<!--E:RSVP-->

El siguiente código es útil para abrir modal en la función openModal () y cerrar en closeModal ():

      function openModal() {
          $(document).ready(function(){
             $("#myModal").modal();
          });
      }

     function closeModal () {
          $(document).ready(function(){
             $("#myModal").modal('hide');
          });  
      }

/ * #myModal es el id de la ventana emergente modal * /