Bootstrap Modal - 如果单击 Yes 按钮，如何返回 True - 自定义确认

Question

好的，我已经花了一整天的时间阅读问答，但仍然无法完成。我需要创建一个自定义的确认（），而不是默认对话框，如果用户单击是，我使用引导模式返回真，否则返回假。

例子：

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

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

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

Answer 2

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

\n\n

然后我合并了Nuno Reis、Fabien M\xc3\xa9nager和Ryan McGeary的答案来创建解决方案。这就是我所做的：

\n\n

\n

1. 添加类作为链接的标识符以使用此自定义确认。在我的代码中，我使用了custom-confirm-link.

\n

2. 将确认消息放入数据绑定中data-confirmation。

   \n\n

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

   \n\n

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

\n

3. 在页脚中，我添加了单击事件侦听器以链接到 class custom-confirm-link。里面：

   \n\n
   \n
   • 我通过数据绑定检索了触发的链接href及其确认消息data-confirmation
   \n
   • 我preventDefault()对活动做了
   \n
   • 弹出一个 bootbox.js 确认，带有（是）和（否）的自定义confirm标签cancel，
   \n
   • 并利用其回调来处理结果
   \n
   • 只有当确认按钮 yes 被点击时，我才会通过模拟链接的点击window.location.href。
   \n
\n

\n\n

就是这样。这是点击事件监听器代码：

\n\n

<script type="text/javascript">\n    //  click event listener to links that requires custom confirm\n    $(\'.custom-confirm-link\').click(function(e){\n\n        //  get link and its confirmation message\n        var link                = $(this);\n        var confirmationmessage = link.data(\'confirmation\');\n        var address             = link.attr(\'href\');\n\n        e.preventDefault();\n\n        bootbox.confirm({\n            title   : \'Confirm\',\n            message : confirmationmessage,\n            buttons : {\n                confirm : {\n                    label : \'Yes\',\n                    className: \'btn-success\'\n                },\n                cancel : {\n                    label : \'No\',\n                    className : \'btn-danger\'\n                }\n            },\n            callback : function (result) {\n                if (result)\n                {\n                    //  simulate click the link\n                    window.location.href = address;\n                }\n            }\n        });\n    });\n</script>\n

\n