Como fazer um modal de confirmação com callback - bootstrap 5


Exemplo básico de como gerar um modal de confirmação com bootstrap 5

HTML

  <div class="container mt-3 pt-3">
    <div class="row">
      <div class="col-12">
        <button class="btn btn-secondary w-50" type="button" name="button">registro 001 </button> <button id="button_modal_confirm" data-value="1" class="btn btn-danger" type="button">Excluir registro 001</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 id="modal_title" class="modal-title">Confirme 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>
          <!-- data-bs-dismiss="modal"-->
          <button data-action="0" type="button" class="btn btn-secondary opacity-50">Cancelar</button>

        </div>
      </div>
    </div>
  </div>

 

Javascript

<script type="text/javascript">
    var modalConfirm = function(callback) {

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

      let modal = new bootstrap.Modal(modalElement, {
        keyboard: false
      });

      btnModalConfirm.addEventListener("click", function(event) {
        modal.show();
      });

      modalElement.addEventListener('show.bs.modal', function(event) {

        let modalConfirmBody = domElementId('modal_confirm_body');
        let id = btnModalConfirm.getAttribute('data-value');
        modalConfirmBody.innerHTML = 'Confirme no botão abaixo que você deseja excluir este registro: ' + id;

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

        if (buttons) {
          divButtons.addEventListener("click", function(event) {
            if (event.target.nodeName === 'BUTTON') {
              let confirm = parseInt(event.target.getAttribute('data-action')) == 1;
              callback(confirm, modal);
            }
            modalConfirmBody.innerHTML = 'Você clicou no botão de exclusão';
            //  callback(true);

          });
        }

        // 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);
        });
        });
        */


      });

    };

    modalConfirm(function(confirm, modal) {
      if (confirm) {
        console.log('A exclusão foi confirmada');
      } else {
        modal.hide();
      }
    });






    function domElementId(id) {
      return document.getElementById(id)
    }
  </script>