JSFiddle - React, Tailwind, and code Playground

by gilbertomg

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <div class="container mt-3 pt-3">
    <div class="row">
      <div class="col-12">
        <button id="button_modal_confirm" class="btn btn-danger" type="button">Confirm?</button>
      </div>
    </div>
  </div>
  <!-- modal element -->
  <div id="modal_confirm" class="modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div id="modal_confirm_header" class="modal-header alert-danger text-danger">
          <h5 class="modal-title">Confirme a exclusão</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div id="modal_confirm_body" class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div id="div_actions" class="modal-footer">
          <button data-action="1" type="button" class="btn btn-danger">Excluir</button>
          <button data-action="0" type="button" class="btn btn-secondary opacity-50" data-bs-dismiss="modal">Cancelar</button>
          
        </div>
      </div>
    </div>
  </div>

JavaScript

let modalElement = document.getElementById('modal_confirm');
    let btnModalConfirm = domElementId('button_modal_confirm');

    btnModalConfirm.addEventListener("click", function(event) {
      let modal = new bootstrap.Modal(modalElement, {
        keyboard: false
      });

      modal.show();
    });

    modalElement.addEventListener('show.bs.modal', function(event) {
      let modalConfirmBody = domElementId('modal_confirm_body');
      modalConfirmBody.innerHTML = 'Confirme no botão abaixo que você deseja excluir este registro';

      let divButtons = domElementId('div_actions'); //document.getElementById('div_actions');
      let buttons = divButtons.getElementsByTagName('BUTTON');

      if(buttons[0]){
        buttons[0].addEventListener("click", function(event) {
          modalConfirmBody.innerHTML = 'Você clicou no botão de exclusão';
        });
      }

      // Caso exista mais de um ação. Podemos capturar cada ação com base no atributo data-action.
      /*
       Array.from(buttons).forEach((item, i) => {
         item.addEventListener("click", function(event) {
        //action
        let action = this.getAttribute('data-action');
        console.log(action);
         });
       });
       */


    });

    function domElementId(id) {
      return document.getElementById(id)
    }