Please, improve modal docs. If not for people, then for AI

[AucT]

I used example from https://getbootstrap.com/docs/5.3/components/modal/#via-javascript
Then I used openAI from some service. And still no luck

Here what openAI send me if I want bootstrap 5 modal with custom func to hide it

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" 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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script>
  function hideModal() {
    var myModal = new bootstrap.Modal(document.getElementById('exampleModal'), {});
    myModal.hide();
  }
</script>

But this doesn't work. And docs doesn't even bother to explain it.

Write in docs that if you really want to hide existing modal, you should make func like this

<script>
  function hideModal() {
    bootstrap.Modal.getInstance('#exampleModal').hide();
  }
</script>

Half-assed documentation will produce bad data for AI. In this era, docs should be very precise.

[julien-deramond]

I was curious, so I tried the same thing with ChatGPT:

• Same hideModal() function
• And it was trying to load https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css which doesn't exist

I'm not sure this is because of any "half-assed" documentation for the latter.
Having tried it in other contexts, I rarely got ready-to-use code that actually works. It can be a good tool for development sometimes, and sometimes not. Or maybe I'm just not good at writing prompts 😄

Tried it also with Copilot which seems to be better in this precise use case:

Anyway, we're trying to create our documentation as complete and usable as possible (even for AI). If you have any ideas on how to improve this modal page, feel free to create a PR or suggest some evolutions :)

[AucT]

I was testing cursor editor, I'm not into this ai stuff. When asked to create modal and custom function it did what I paste,
Anyway before using ai editor I did same as it.

To improve docs page add example of using javascript for already existing modals

bootstrap.Modal.getInstance(document.getElementById('exampleModal')).hide();

bootstrap.Modal.getInstance('#exampleModal').hide();

and for not yet initiated modals

bootstrap.Modal.getOrCreateInstance(document.getElementById('exampleModal')).show();

bootstrap.Modal.getOrCreateInstance('#exampleModal').show();

cheers

[julien-deramond]

Thanks for your feedback, we'll see how to improve the doc around getInstance().

[jyxjjj]

Which issue or PR linked to this?
I got this issue too.
Thanks a lot, but the docs seem continuing an error version.