Bootstrap模态框 - 如何在点击“是”按钮后返回True - 自定义确认

Question

好的，我花了一整天阅读问答，但仍然无法完成。我需要创建一个自定义的confirm()函数，其中使用bootstrap模态框来代替默认对话框，如果用户点击“是”，则返回true，如果点击“否”，则返回false。

例如：

<a href="remove.php?id=3" onclick="return custom_confirm('您确定要删除吗？');" />

我的自定义确认函数如下：

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

- Lynnell Neri

---

过去我也遇到了同样的问题，最终不得不使用 http://bootboxjs.com/ 之外的库。 - Tran Audi

@TranAudi，谢谢！你在这里做得很好：http://bootboxjs.com/examples.html#also-applies-to-alert-prompt-customwith-alternate-button-tex - Lynnell Neri

Answer 1

点击事件本质上是非阻塞和异步的。与原生的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>
...

如果你想实际返回某些东西，你可以返回一个 Promise，它将解析为 true 或 false。但异步代码仍然是异步的。

- Yury Tarabanko

---

所以基本上，我不能使用我的代码来模仿自定义的 confirm() 对吗？ - Lynnell Neri

@LynnellEmmanuelNeri 你是不是想说 confirm？如果是的话，那就不要用它 :) confirm会阻止JavaScript执行。 - Yury Tarabanko

@LynnellEmmanuelNeri 如果你查看几乎所有用于制作自定义提示和确认的库，它们都使用回调或承诺（或两者兼备）。 - Yury Tarabanko

我明白了，谢谢。是的，你说得对。我现在会发布答案了。 - Lynnell Neri

这个解决方案给我一个错误：“回调不是一个函数”.. ?? - Sho

function custom_confirm(message, callback) 调用该函数时，callback参数应传入什么？ - Sho

Answer 2

感谢大家的答案和评论。我终于解决了。正如建议的那样，我使用了一个叫做Bootbox.js的库，并使用自定义确认对话框和替代按钮文本（无需重新发明轮子，只需调整它来适应需要）。

然后，我结合了Nuno Reis, Fabien Ménager, 和 Ryan McGeary的答案来创建解决方案。这是我做的事情：

1. Add class as identifier for links to use this custom confirmation. In my code, I used custom-confirm-link.

2. Put confirmation message into data bind data-confirmation.

   So my link now looks like this:

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

3. In footer, I added click event listener to links with class custom-confirm-link. Inside:

   • I retrieved the link triggered, its href and its confirmation message through data bind data-confirmation
   • I did preventDefault() to the event
   • popped a bootbox.js confirm with custom label for confirm (yes) and cancel (no),
   • and utilized its callback to process the result
   • Only when confirm button yes is clicked will I simulate the clicking of link through 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>

- Lynnell Neri