提问者:小点点

引导模式-单击“是”按钮时如何返回True-自定义确认


好吧,我花了一整天的时间读Q

示例:

<代码>

我的自定义确认功能是:

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">&times;</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  -->

共2个答案

匿名用户

Click事件本质上是非阻塞和异步的。与本机不同,确认。因此,您不能返回truefalse。您必须以某种方式处理用户交互的异步性质。

最直接的方法是通过回调

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

用超文本标记语言

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

如果您想实际返回某些内容,您可以返回一个将解析为truefalse的Promise。但是异步代码仍然是异步的。

匿名用户

谢谢大家的回答和评论。我终于解决了。按照建议,我使用了一个名为Bootbox的库。js并使用带有备用按钮文本的自定义确认(无需重新发明轮子,只需调整它以满足需要)

然后,我结合了努诺·赖斯、法比安·梅内格和瑞安·麦格瑞的答案来创建解决方案。以下是我所做的:

>

将确认消息放入数据绑定数据确认

所以我的链接现在看起来像这样:

<a href="remove.php?id=3" class="custom-confirm-link" data-confirmation="Are you sure you want to remove this?" />

在页脚中,我将click event listener添加到带有类自定义确认链接的链接中。内部:

  • 我通过数据绑定数据确认
  • 我对事件执行了preventDefault()
  • 弹出一个引导盒。js使用自定义标签确认确认(是)和取消(否),
  • 并利用其回调来处理结果
  • 只有当点击确认按钮yes时,我才会通过窗口模拟点击链接。地方href

就这样了。点击事件监听器代码如下:

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