将确认()转换为引导模式对话框
将确认()转换为引导模式对话框
提问于 2021-07-02 01:21:04
我有下面的代码，当我点击删除记录按钮时，它会在页面顶部打开一个普通的JS confirm()对话框。
我希望有相同的事情发生使用一个启动模式或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");
}回答 2
Stack Overflow用户
回答已采纳
发布于 2021-07-12 00:50:54
$(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确认在删除按钮单击。
Stack Overflow用户
发布于 2021-11-20 17:45:25
ES6和BootStrap 5.1
普通的香草JS。利用承诺。将引导模式模拟为具有相同行为的本机确认()
语法
result = await b_confirm(message)
参数
消息:要在确认对话框中显示的字符串。
返回值
指示选择了OK (真)还是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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68222671
复制相关文章
相似问题
如何将引导模式设置为确认对话框？
使用Twitter引导模式而不是确认对话框
引导确认对话框
引导对话框确认onclick确认事件
引导模式确认操作
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
