How to Trigger a Bootstrap Modal Programmatically

How can I trigger a Bootstrap modal programmatically?

In order to manually show the modal pop up you have to do this

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

You previously need to initialize it with show: false so it won't show until you manually do it.

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

Where myModal is the id of the modal container.

Programmatically show Bootstrap modal window

Try this. Its working for me.

If You have a login button and If login details is correct then You want to show this popup. Then do something like this.

<button type="button" class="btn btn-primary" onclick="checkUserDetails()"> Login</button>

Then In your script tag or your js file

function checkUserDetails() {
  // Check user details here 
  if (loginDetail) {  
    $("#YourModelName").show();   // show modal/popup
  } else {
    // do somethimg if logindetails is not valid
  }
}

Hope it help you.

Bootstrap V5 manually call a modal myModal.show() not working (vanilla javascript)

The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .modal-open to the to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal. [source]

How to use via Vanilla JavaScript

Create a modal with a single line of JavaScript:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

source

A quick example:

var myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
document.onreadystatechange = function () {
  myModal.show();
};

<!DOCTYPE html>
<html lang="en">
  <head>

    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
      crossorigin="anonymous"
    />
    <title>Hello, world!</title>
  </head>
  <body>

    <div
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-dismiss="modal"
            >
              Close
            </button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <!-- JavaScript and dependencies -->
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
      crossorigin="anonymous"
    ></script>

    <script src="./app.js"></script>
  </body>
</html>

Open Bootstrap 4 Modal via JavaScript by clicking a link

Trigger click event on a[href$="#Modal"].

$('a[href$="#Modal"]').on( "click", function() {   $('#Modal').modal('show');});

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Trigger the modal with a button --><a href="#Modal" class="btn btn-info btn-lg">Open modal</a><!-- Modal --><div id="Modal" class="modal fade" role="dialog">  <div class="modal-dialog">
<!-- Modal content--><div class="modal-content">  <div class="modal-header">    <button type="button" class="close" data-dismiss="modal">×</button>    <h4 class="modal-title">Modal Header</h4>  </div>  <div class="modal-body">    <p>Some text in the modal.</p>  </div>  <div class="modal-footer">    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  </div></div>
  </div></div>

trigger bootstrap modal via jquery

Your jQuery function to add the click handler to the button, and to open the modal window should both work. See the example below. I can only suggest you to take a look at for example Chrome's DevTools to see if you have any JavaScript errors in its console.

$(document).ready(function(){  $('#btn').click(function(){    $('#server_msg_modal').modal('show');   });});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /><script src="//code.jquery.com/jquery-1.11.0.min.js"></script><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="btn btn-danger" href="#server_msg_modal" data-toggle="modal">using data attribute</div>
<div class="btn btn-danger" id="btn">using jQuery click handler</div>

<div class="modal fade" id="server_msg_modal">  <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">×</span></button>        <h4 class="modal-title">Modal title</h4>      </div>      <div class="modal-body">        <p>Modal body</p>      </div>    </div><!-- /.modal-content -->  </div><!-- /.modal-dialog --></div><!-- /.modal -->

How to pass parameters to modal when i call it programmatically?

You cannot set relatedTarget, it is a readonly property of the event. show.bs.modal is BTW fired by the bootstrap modal itself, so either way you are lost.

But why not trigger the click event of the modal trigger button programmtically, it would be the exact same as calling modal(), and then the relatedTarget is present :

$("#button").click();

Under the assumption that you have well formed "modal trigger button" like this :

<button id="button" data-toggle="modal" data-target="#confirmModal">show modal</button>

see here -> http://jsfiddle.net/y3s1t7ea/

Open ng-bootstrap modal programmatically

To access the content element inside the class, declare:

@ViewChild('content', { static: false }) private content;
                         ^for Angular8+

and add the corresponding import at the top of the class:

import { ViewChild } from '@angular/core';

and finally call open method for that element on change detection:

ngOnChanges(changes: any) {
   this.open(this.content);
}