Dynamic Bootstrap 5 Modals via HTML Data Attributes

Bootstrap 5 Modal Dynamic is a JavaScript extension that enhances Bootstrap 5 modals with dynamic content loading, nested modal support, and back-button closing capabilities.

Features:

• Dynamic Content Loading: Pulls modal body content from an AJAX endpoint or an existing HTML element on the page.
• Pure HTML Configuration: All modal options are set via data- attributes on the trigger element.
• Customization: Control modal title, header, footer, width, and add custom CSS classes.
• Template-Based: Clones a base modal template, so you define the structure once.
• Nested Modals: Handles opening modals from within other modals.
• Event Hooks: Dispatches custom events (neutralFetchCompleted, neutralFetchError) after AJAX operations.

How to use it:

1. Make sure you first have the latest Bootstrap 5 framework installed in your project.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.min.min.js"></script>

2. Download ‘modal-dynamic.min.js’ and place it after Bootstrap’s JavaScript.

<script src="modal-dynamic.min.js"></script>

3. If you want modals to close with the browser back button, include modal-close-on-back.min.js:

<script src="modal-close-on-back.min.js"></script>

4. Add the .modal-dynamic class to your trigger element (e.g., an <a> tag or <button>).

<a class="modal-dynamic" href="#modal-id">Launch Modal</a>

<div class="modal fade" id="modal-id" tabindex="-1" aria-labelledby="exampleModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModal1Label">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Modal content
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

5. Fetch content from an external data source and customize the modal template:

<a class="btn btn-primary modal-dynamic"
   href="#myModal"
   data-template="#modalTemplate"
   data-url="/api/content/123"
   data-title="Dynamic Content Details">
   Open Dynamic Modal
</a>

<!-- Modal Template -->
<div id="modalTemplate" class="modal fade" tabindex="-1" aria-labelledby="modalBaseTitle" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalBaseTitle">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>This content will be replaced.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

6. All available data- attributes for your trigger element:

• href="#modal-id": (REQUIRED) Sets the ID for the generated modal instance.
• data-template="#id": (REQUIRED) ID of the HTML modal template to clone.
• data-url="/url" or data-url="#id": (REQUIRED – one or the other) Source for modal body content. Either an AJAX URL or an ID of an HTML element on the page.
• data-title="Title": Sets the modal’s title.
• data-header="#id": Replaces the entire modal header with content from the element with this ID.
• data-noheader="true": Hides the modal header.
• data-nofooter="true": Hides the modal footer.
• data-width="500px" or data-width="80%" or data-width="700": Sets max-width of the .modal-dialog. Numbers without units are treated as pixels.
• data-class="my-custom-class another-class": Adds specified classes to the modal element.
• data-keyboard="false": (Default: true) Disables closing the modal with the Escape key.
• data-backdrop="static": (Default: true, which means standard backdrop behavior) Prevents closing the modal by clicking the backdrop. Use false for no backdrop, though this is less common for typical modals.

FAQs

Q: Can I load forms in the modal and handle submissions?

A: Yes, you can load forms via AJAX or from page elements. For form submissions, you’ll need to handle the submission process separately using standard form handling techniques. The modal will simply serve as a container.

Q: How do I handle errors when loading content via AJAX?

A: The library triggers a custom event neutralFetchError when AJAX requests fail. You can listen for this event and handle errors accordingly. The error message is automatically displayed in the modal body.

Q: Can I customize the modal after it’s been created?

A: Once the modal is created, you can access it via standard DOM methods or Bootstrap’s modal API. For example:

bootstrap.Modal.getInstance(document.querySelector('#modal-id'))

Q: Does the library support lazy loading of content?

A: Yes, content is always loaded when the modal is opened, not before. This makes it efficient for scenarios where you have many potential modals but only a few will be opened by the user.

Q: Can I use this with dynamically created trigger elements?

A: Yes. Since the library uses event delegation on the document body, it works with dynamically created elements as long as they have the .modal-dynamic class and required data attributes.

The post Dynamic Bootstrap 5 Modals via HTML Data Attributes appeared first on CSS Script.