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

Question

whats the correct way to manually call a modal in bootstrap 5?

i want to show the modal when page is open. i tried this:

my modal

my script is

var myModal = document.getElementById('myModal');
document.onreadystatechange = function() {
   
    myModal.show();
}

but got this error in console log:

 myModal.show is not a function
    at HTMLDocument.document.onreadystatechange

user_9857078 · Answer

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();
};



  

    
    


    
    Hello, world!
  
  

    
      
        
          
            Modal title
            
          
          
            ...

As for your code, you didn't follow the right way to show/toggle a modal in Vanilla JavaScript. Why did you expect myModal.show() to happen while myModal is just a DOM element?

user_6887957 · Answer

Create a new instace of modal and then call show method(see usage points)

var myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
myModal.show()

ref: https://v5.getbootstrap.com/docs/5.0/components/modal/#options

note: Bootstrap v5 no more uses jquery, instead it uses javascript. lots of changes are there in bootstrap v5, if you are working for a company and willing to use Bootstrap v5 then please go through all the changes.

user_2891947 · Answer

Based on the javascript code provided by the OP I think the actual goal here is to reach out the component by the DOM element. I have also looked for a way to do this so wanted to share what I have found(or not found).

v4- It was possible and commonly used with the earlier versions. In v4 we could have used it easily with jQuery although the component is initialized by the data attributes and not directly from js.

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

v5.0.0-beta2 In the new version, a very promising api example is provided at the docs for another type of component. However, it does not seem to be working currently. (https://getbootstrap.com/docs/5.0/getting-started/javascript/#asynchronous-functions-and-transitions)

var myModal = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModal) 
console.log(modal) // null

Since all the components are using same basecomponent, one might think that it is possible to get instance of the modal as well as the others like dropdown, collapse, carousel and all by using getInstance api method but it is not possible. At least for the current beta version.

A final note: It is still possible to include jQuery before v5 script and achive this.(https://codepen.io/cadday/pen/Jjbvxvm)

window.onload = function() {
  console.log(jQuery('#myModal').modal('show'));
}

user_1806956 · Answer

[Bootstrap 5+, vanilla js, bootstrap imported as a global]

let modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('myModal')) // Returns a Bootstrap modal instance
// Show or hide:
modal.show();
modal.hide();

See more here: https://getbootstrap.com/docs/5.0/components/modal/#getorcreateinstance

user_8960622 · Answer

I've also searched for a solution to auto-open the modal on page load and solved it in the following solution. You be able to add an data-auto-open attribute to the normal bootstrap syntax if you want to have it auto-opened. If the attribute is not set, is the modal working in the standard way as well.

I've added also an option to temporarily remove the fade effect if you want to have it open instantly after the page load. To make it happen is it just necessary to use data-auto-open="instant" instead of the empty data-auto-open attribute. After it's closed once and you want to re-open it manually will it have the fade effect again.

The working solution in TypeScript for Bootstrap 5.0.0-Beta3 would be like this:

// @ts-ignore
import { Modal } from 'bootstrap';

window.addEventListener('DOMContentLoaded', (event) => {
    const selector = '[data-auto-open]';
    const modalElement: HTMLElement | null = document.querySelector(selector);

    if (!modalElement) {
        return;
    }

    const mode = modalElement.dataset.autoOpen;
    const fade = modalElement.classList.contains('fade');

    if (fade && mode === 'instant') {
        modalElement.classList.remove('fade');
    }

    const modal = new Modal(modalElement, {});

    if (fade && mode === 'instant') {
        // There's currently a bug in the backdrop when the fade class 
        // will be added directly after the modal was opened to have the
        // close animation
        // modalElement.addEventListener('shown.bs.modal', function (event) {
        modalElement.addEventListener('hidden.bs.modal', function (event) {
            modalElement.classList.add('fade');
        }, {once : true});
    }

    modal.show();
}, {once : true});

The HTML would be the standard one:






    
        
            
                
                    Example Modal title
                
                
            
            
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
                eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

user_5304455 · Answer

[Bootstrap 5]

Plugins can be included individually (using Bootstrap’s individual js/dist/*.js), or all at once using bootstrap.js or the minified bootstrap.min.js (don’t include both).

If you use a bundler (Webpack, Rollup…), you can use /js/dist/*.js files which are UMD ready.

For Example, if you want to import only the Modal plugin from Bootstrap 5 you can do it:

Add the import statement at the top of your js file

import Modal from 'bootstrap/js/dist/modal';

And then show the modal when click on a button element for instance:

const myButton = document.getElementById('my-button-id');
const myModal  = document.getElementById('my-modal-id');

const modal = new Modal(myModal); // Instantiates your modal

myButton.addEventListener('click', () => {
    modal.show(); // shows your modal
});

user_2184308 · Answer

An easy way to open/show a modal dialog in Bootstrap 5 is to create a link in your HTML to do it (it can be invisible), and then create/trigger a click event on the link.

Here is an example:

A link to open a modal dialog:

The JavaScript code to trigger the click event on this link:

triggerEvent(test,'click');

function triggerEvent(el,evName)
    {el.dispatchEvent(new CustomEvent(evName,{}));}

user_3370231 · Answer

The fastest way to do it

new bootstrap.Modal($('#MyModal')).show();

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

8 Answers