Fix Bootstrap 5 modal documentation

[0x4A-0x41-0x4B]

The documentation for loading and showing a bootstrap modal dialog with its animation doesn't seem to work with bootstrap 5.

The request gets made and the content is injected exactly how it should be, but the dialog animation does not work. The modal just appears abruptly.

Is there a way to fix this?

[jbnv]

The instructions need to include setting the display style to block. I don't know what that would look like in Hyperscript (since I'm not using Hyperscript) but here's what it looks like as an hx-on attribute (newlines added for readibility):

htmx:afterOnLoad: 
const myModal=document.getElementById('myModal');
myModal.classList.add('show');
myModal.style['display'] = 'block'

This isn't a complete solution either because you don't get the dimming of the background and anything else that Bootstrap does with it. Really, the correct call is to wrap it in Bootstrap's object and call the show method:

const myModal = new bootstrap.Modal('#myModal', {}); myModal.show();

However, this method requires bootstrap set in your window (CDN, npm, etc).

[jhh]

I've had success with Bootstrap v5.3.3 using the example code in the documentation after I added hx-swap="innerHTML" to the <button> element.