[英]Convert confirm() to Bootstrap modal dialog
我有下面的代码,当我点击删除记录按钮时,它会在页面顶部打开一个普通的 JS confirm()
对话框。
我想使用 Bootstrap 模态或 jQuery 确认对话框模态发生同样的事情。
<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");
}
$(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');
}
}
});
});
我为我自己的上述问题实施的完美解决方案,Jquery Modal Confirmation on Delete 按钮单击。
使用ES6和BootStrap 5.1
只是在普通的 Vanilla JS 中。 使用承诺。 将引导模式模拟为具有相同行为的本机确认()
语法:
result = await b_confirm(message)
参数:
message :要在确认对话框中显示的字符串。
返回值:
一个布尔值,指示是否选择了 OK (true) 或 Cancel (false)
(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.