Tuesday, March 31, 2020

[Bootstrap] bootstrap modal alert, confirm

* bootstrap modal alert, confirm

Key Point :

In confirmModal
To prevent recursive calls from JavaScript closures
Use confirmIndex...


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


sample.html

==============================




<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>

==============================
at
Labels: , ,