v6 - Intended Way to Invoke Dialog via Javascript to have it appear

[jweaver0312]

For example, I have a welcome dialog that shows on a user's first visit based on a cookie.

In v5, with Modal, i could get it to show using jQuery simply by $("#welcomeModal").show().

My question is on v6, how do I accomplish the same, using regardless if I use jQuery to accomplish it or vanilla JavaScript.

After converting over to Dialog, it doesn't seem $("#welcomeDialog").show(); works nor the vanilla method:

const welcomeDialog = bootstrap.Dialog.getInstance("#welcomeDialog"); welcomeDialog.showModal();

and even welcomeDialog.show()

[patkon]

• getInstance() returns null if the dialog was never initialized.
• The Bootstrap method is show(), not showModal()

const welcomeDialog = bootstrap.Dialog.getOrCreateInstance('#welcomeDialog');
welcomeDialog.show();

https://getbootstrap.com/docs/6.0/components/dialog/#javascript-behavior

$('#welcomeDialog').show() is jQuery’s own display toggle and has nothing to do with Bootstrap. It didn’t really open a v5 Modal properly either (that was $('#welcomeModal').modal('show')).

[jweaver0312]

Would the same apply if the dialog itself is present by hardcoded HTML? That's why I was using getInstance(), since the Dialog already exists

Manually calling the constant does return the entire dialog, so getInstance is at least indicating it was initialized

[patkon]

Yes, it applies the same way. Hardcoded HTML only means the DOM element exists. A Bootstrap instance is a separate JavaScript object that is not created until someone clicks a data-bs-toggle="dialog" trigger or calls new bootstrap.Dialog(...)...

[echolet]

Playing with v6 alpha I decided to write a small jQuery plugin:

  <script type="module">
     import * as bootstrap from 'bootstrap';

     ['Dialog','Menu','Toast'].forEach(type => {
       const key = type.toLowerCase();
       $.fn[key] = function(method) {
         const d = bootstrap[type].getOrCreateInstance(this.get(0));
         d[method]();
       };
     });
  </script>

Then you can do things like $('#mydialog').dialog('show');. In my case I only need this for dialogs, menus and toasts.