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">×</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">×</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>
==============================
