[英]Bootstrap Modal - How to Return True if Yes Button is Clicked - Customized Confirm
好吧,我花了一整天时间阅读问答,但仍然无法完成。 我需要创建一个自定义的confirm(),而不是默认对话框,我使用bootstrap模式返回true如果用户单击是,则返回false为否。
例:
<a href="remove.php?id=3" onclick="return custom_confirm('Are you sure you want to remove this?');" />
我的自定义确认功能是:
function custom_confirm(message) {
// put message into the body of modal
$('#modal-custom-confirmation').on('show.bs.modal', function (event) {
// store current modal reference
var modal = $(this);
// update modal body help text
modal.find('.modal-body #modal-help-text').text(message);
});
// show modal ringer custom confirmation
$('#modal-custom-confirmation').modal('show');
// if Yes button is clicked, return true
// if No button is clicked, return false
// logic here...
}
我的模态在这里:
<!-- modal: custom confirmation -->
<div class="modal fade text-left" id="modal-custom-confirmation" tabindex="-1" role="dialog" aria-labelledby="modal-help-title">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong class="modal-title" id="modal-help-title">Confirm</strong>
</div><!-- /.modal-header -->
<div class="modal-body">
<p id="modal-help-text"></p>
</div><!-- /.modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-success">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div><!-- /.modal-footer -->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Click事件本质上是非阻塞和异步。 与原生confirm
不同。 所以你不能返回true
或false
。 您必须以某种方式处理用户交互的异步性质。
最直接的方式是通过回调
function custom_confirm(message, callback) {
// put message into the body of modal
$('#modal-custom-confirmation').on('show.bs.modal', function (event) {
// store current modal reference
var modal = $(this);
// update modal body help text
modal.find('.modal-body #modal-help-text').text(message);
});
// show modal ringer custom confirmation
$('#modal-custom-confirmation').modal('show');
$('#modal-custom-confirmation button.ok').off().on('click', function() {
// close window
$('#modal-custom-confirmation').modal('hide');
// and callback
callback(true);
});
$('#modal-custom-confirmation button.cancel').off().on('click', function() {
// close window
$('#modal-custom-confirmation').modal('hide');
// callback
callback(false);
});
}
在HTML中
...
<div class="modal-footer">
<button type="button" class="btn btn-success ok">Yes</button>
<button type="button" class="btn btn-default cancel">No</button>
</div>
...
如果你想要实际返回一些东西,你可以返回一个可以解析为true
或false
的Promise。 但仍然异步代码保持异步。
感谢大家的回答和评论。 我终于解决了。 正如所建议的那样,我使用了一个名为Bootbox.js的库, 并使用带有备用按钮文本的自定义确认 (无需重新发明轮子,只需调整它以满足需要)
然后我将Nuno Reis , FabienMénager和Ryan McGeary的答案结合起来 ,以创建解决方案。 这是我做的:
添加类作为链接的标识符以使用此自定义确认。 在我的代码中,我使用了custom-confirm-link
。
将确认消息放入数据绑定data-confirmation
。
所以我的链接现在看起来像这样:
<a href="remove.php?id=3" class="custom-confirm-link" data-confirmation="Are you sure you want to remove this?" />
在页脚中,我将click事件监听器添加到类custom-confirm-link
。 内:
data-confirmation
检索了触发的链接 ,其href
及其确认消息 preventDefault()
confirm
(是)和cancel
(否), window.location.href
来模拟链接的点击 。 而已。 这是click事件监听器代码:
<script type="text/javascript">
// click event listener to links that requires custom confirm
$('.custom-confirm-link').click(function(e){
// get link and its confirmation message
var link = $(this);
var confirmationmessage = link.data('confirmation');
var address = link.attr('href');
e.preventDefault();
bootbox.confirm({
title : 'Confirm',
message : confirmationmessage,
buttons : {
confirm : {
label : 'Yes',
className: 'btn-success'
},
cancel : {
label : 'No',
className : 'btn-danger'
}
},
callback : function (result) {
if (result)
{
// simulate click the link
window.location.href = address;
}
}
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.