JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css">

<div class="container">
<div class="row">
<div class="col p-2">
<button type="button" 
class="btn btn-primary getModal" 
data-bs-toggle="modal" 
data-bs-target="#testModal"
>Open Modal</button>
</div>
</div>
</div>

JavaScript

const container= document.querySelector('.container');


  function delegate(parent, event, selector, callback) {
        const listener = (e) => { 
            
            const currentTarget = e.target.closest(selector);    
            if (!currentTarget) { return; }
    
            const newEvent = { ...e, innerEvent: e, currentTarget };
            callback.call(currentTarget, newEvent);
        };
    
        parent.addEventListener(event, listener, false);
    
        return () => {
            parent.removeEventListener(event, listener, false);
        };
    }
  
  
  class GenerateModal {
    constructor(id, title, body, options, hasFooter, buttons) {
      if (!id || !body) {
        throw new Error("Modal must have an 'id' and 'body' content.");
      }

      this.id = id;
      this.title = title;
      this.body = body;
      this.options = options || {};
      this.hasFooter = hasFooter;
      this.buttons = buttons || [];
      this.modal = this.createModal();
      this.modalInstance = new bootstrap.Modal(this.modal, options);
    }

    createModal() {
      const modal = document.createElement("div");
      modal.id = this.id;
      modal.classList.add("modal", "fade");

      for (const [key, value] of Object.entries(this.options)) {
        modal.setAttribute(`data-bs-${key}`, value);
      }

      modal.innerHTML = `
        <div class="modal-dialog ${this.options.dialogClass || ''}">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">${this.title}</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              ${this.body}
            </div>
            ${this.hasFooter ? this.createFooter() : ''}
          </div>
        </div>
      `;
      return modal;
    }

    createFooter() {
      return `
        <div class="modal-footer">
         ...