Bootstrap modal confirm action

Question

I'm using this simple Bootstrap 4 Modal: https://getbootstrap.com/docs/4.0/components/modal/#modal-components

I show the modal with this tag:

<a href="#" data-toggle="modal" data-target="#exampleModal">

The Modal appears correctly.

The Modal has 2 buttons (cancel and save changes). How can I fire save button press to do some stuff and then close modal?

Jquery, javascript... https://stackoverflow.com/questions/16493280/close-bootstrap-modal — Chopi, May 11 '18 at 13:32
?? I'm able to show the modal. I can't fire when the "Save changes" is pressed — aletede91, May 11 '18 at 13:34
Possible duplicate of [How to save and close a bootstrap modal?](https://stackoverflow.com/questions/35068342/how-to-save-and-close-a-bootstrap-modal) — Chopi, May 11 '18 at 13:38

airplanez · Answer 1 · 2020-04-01T07:21:16.690

Check this.

bootstrap modal alert, confirm

function confirmModal(message, callback) {
    var confirmIndex = true;

    var newMessage = message.replace(/(?:\r\n|\r|\n)/g, "<br>");
    $('#modal_confirm_dialog_body').html("" + newMessage + "");
    $('#modal_confirm_dialog').modal('show');

    $('#confirm_cancle').on("click", function() {
        if(confirmIndex) {
            callback(false);
            $('#modal_confirm_dialog').modal('hide');
            confirmIndex = false;
        }
    });

    $('#confirm_ok').on("click", function() {
        if(confirmIndex) {
            callback(true);
            $('#modal_confirm_dialog').modal('hide');
            confirmIndex = false;
        }
    });
}

<html>
<head>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</head>
<script>
function alertModal(message) {
    var newMessage = message.replace(/(?:\r\n|\r|\n)/g, "<br>");
    $('#modal_alert_dialog_body').html("" + newMessage + "");
    $('#modal_alert_dialog').modal('show');
}

function confirmModal(message, callback) {
    var confirmIndex = true;

    var newMessage = message.replace(/(?:\r\n|\r|\n)/g, "<br>");
    $('#modal_confirm_dialog_body').html("" + newMessage + "");
    $('#modal_confirm_dialog').modal('show');

    $('#confirm_cancle').on("click", function() {
        if(confirmIndex) {
            callback(false);
            $('#modal_confirm_dialog').modal('hide');
            confirmIndex = false;
        }
    });

    $('#confirm_ok').on("click", function() {
        if(confirmIndex) {
            callback(true);
            $('#modal_confirm_dialog').modal('hide');
            confirmIndex = false;
        }
    });
}

$(document).ready(function () {
 $("#run_alert").click(function() {
  alert("Alert sample");
 });

 $("#run_confirm").click(function() {
  if(confirm("Confirm sample?")) {
   alert("OK");
  } else {
   alert("Cancel");
  }
 });

 $("#run_alert_modal").click(function() {
  alertModal("Modal Alert sample");
 });

 $("#run_confirm_modal").click(function() {
  confirmModal("Modal Confirm sample?", function(confirm) {
   if(confirm) {
    alertModal("OK");
   } else {
    alertModal("Cancel");
   }
  });
 });
});
</script>
<body>

   <div class="col-sm-12 text-center">

  <br><br>

  <button type="button" class="btn btn-secondary" id="run_alert">Alert</button>
  <button type="button" class="btn btn-secondary" id="run_confirm">Confirm</button>

  <br><br>

  <button type="button" class="btn btn-primary" id="run_alert_modal">Modal Alert</button>
  <button type="button" class="btn btn-primary" id="run_confirm_modal">Modal Confirm</button>

  <br><br>

   </div>

</body>

<!-- modal alert, confirm dialog { -->
<!-- alertModal -->
<div class="modal fade" id="modal_alert_dialog" role="dialog" aria-labelledby="modal_alert_dialog_label" aria-hidden="true" style="z-index: 8192">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal_alert_dialog_label">
        </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="modal_alert_dialog_body" align="center">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>
<!-- confirmModal -->
<div class="modal fade" id="modal_confirm_dialog" role="dialog" aria-labelledby="modal_confirm_dialog_label" aria-hidden="true" style="z-index: 8192">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal_confirm_dialog_label">
        </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="modal_confirm_dialog_body" align="center">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="confirm_cancle">Cancle</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="confirm_ok">OK</button>
      </div>
    </div>
  </div>
</div>
<!-- modal alert, confirm dialog } -->

</html>

Bootstrap modal confirm action

1 Answers1