将confirm() 转换为Bootstrap 模态对话框

Question

I have the below code which opens a normal JS confirm() dialog at the top of the page when I click on the delete record button.

I want to have the same thing happen using a Bootstrap modal or jQuery confirmation dialog modal.

<a id="deleteCode" class="dTButtons" branchcode="val.BranchCode">
  <span id="delete">
    <img src="../Images/fi-rr-trash.svg"/>
  </span>
</a>

$(document).on("click", "#deleteCode", function() {
  var r = confirm("Are you sure you want to delete this item?");
  if (r == true) {
    var mode = "D";
    var branchcode = parseInt($(this).attr('branchcode'));
    DeleteBranch(branchcode, mode);
  } else {
    return false;
  }
});

function DeleteBranch(branchcode, mode) {
  var obj = {
    BranchCode: branchcode,
    Mode: mode
  }
  funCallAjax(savebranchsuccess, savebranchsuccess, '/api/mastersapi/DeleteBranch', obj, "POST");
}

Answer 1

$(document).on("click", "#deleteCode", function () {
    //$('#deleteModal').modal().show();
    var txt;
    var codeid = parseInt($(this).attr('codeid'));
    $.confirm({
        title: 'Delete Record?',
        content: 'Are you sure You want to delete the record?',
        type: 'white',
        buttons: {
            ok: {
                text: "DELETE",
                btnClass: 'btn btn-danger',
                keys: ['enter'],
                action: function () {
                    DeleteZone(codeid);
                    $.alert({
                        title: 'Alert!',
                        content: 'Record Deleted successfully!',
                        confirm: function () {
                            tim
                            alert('Deleted Alert!');
                        }
                    });
                }
            },
            cancel: function () {
                console.log('the user clicked cancel');
            }
        }
    });
});

The Perfect solution which I have implemented for my own above question, Jquery Modal Confirmation on Delete button click.

Answer 2

With ES6 and BootStrap 5.1

Just in plain Vanilla JS. Using promises. Simulate bootstrap modal as native confirm() with the same behaviour

Syntax :

result = await b_confirm(message)

Parameters :

message : A string you want to display in the confirmation dialog.

Return value :

A boolean indicating whether OK (true) or Cancel (false) was selected

 (async() => { const result = await b_confirm('IT WILL BE DELETED') alert(result) })() async function b_confirm(msg) { const modalElem = document.createElement('div') modalElem.id = "modal-confirm" modalElem.className = "modal" modalElem.innerHTML = ` <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-body fs-6"> <p>${msg}</p> <p>Are you sure?</p> </div> <!-- modal-body --> <div class="modal-footer" style="border-top:0px"> <button id="modal-btn-descartar" type="button" class="btn btn-secondary">Cancel</button> <button id="modal-btn-aceptar" type="button" class="btn btn-primary">Accept</button> </div> </div> </div> ` const myModal = new bootstrap.Modal(modalElem, { keyboard: false, backdrop: 'static' }) myModal.show() return new Promise((resolve, reject) => { document.body.addEventListener('click', response) function response(e) { let bool = false if (e.target.id == 'modal-btn-descartar') bool = false else if (e.target.id == 'modal-btn-aceptar') bool = true else return document.body.removeEventListener('click', response) document.body.querySelector('.modal-backdrop').remove() modalElem.remove() resolve(bool) } }) }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>