在Bootstrap确认模态框中等待值？

Question

这个问题看起来很蠢，但我不知道如何等待确认按钮返回值。由于JavaScript是基于单线程的，所以我需要知道如何设置类似回调函数的东西，直到按下按钮。这是对话框的结构：

<div class="modal fade" id="confirmation" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Confirm</h4>
            </div>
            <div class="modal-body">
                <label>Are you sure?</label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-ok" data-dismiss="modal">Continue</button>
                <a class="btn btn-danger" data-dismiss="modal">Cancel
                </a>
            </div>
        </div>
    </div>
</div>

<button id="go">press me</button>

和js：

$(document).ready(function()
{
    $('#go').click(function()
    {
        $('#confirmation').modal('show');
        //if the user has pressed the .btn-ok button then an alert appear
        alert(true);
    })
});

实际上，当用户按下按钮时，会出现一个bootstrap对话框。我只需要在用户按下继续按钮.bnt-ok时显示警告，但事实上我不知道如何做。有人可以向我展示如何吗？谢谢。

JSFIDDLE

更新

1 用户触发事件并执行函数one：

one: function()
{
    if(two()) //if function two return true then show alert
    {
        alert(true);
    }
}

2 显示 Bootstrap 对话框的函数：

 two: function()
 {
    $('#confirmation').show();

   //here I need to check if the user has pressed btn-ok, if yes,
   //I need to return true, otherwise false

   return true;
 }

问题出现在函数two中，因为没有办法在用户点击按钮之前停止函数。因此确认对话框会显示，但函数会返回true。我该如何等待用户点击？

- AgainMe

Answer 1

简单地说，将点击处理程序附加到.btn-ok元素上。

如下所示：

$('.btn-ok').click(function(){
   alert(true);
});

jsFiddle

编辑：

使用ES6 Promise解决您的问题的解决方案，请查看。

const modal = new Promise(function(resolve, reject){
       $('#confirmation').modal('show');
       $('#confirmation .btn-ok').click(function(){
           resolve("user clicked");
       });
       $('#confirmation .btn-danger').click(function(){
           reject("user clicked cancel");
       });
      }).then(function(val){
        //val is your returned value. argument called with resolve.
        alert(val);
      }).catch(function(err){
        //user clicked cancel
        console.log("user clicked cancel", err)
      });

更新的 jsFiddle。请注意，它使用 ES6 promise，您应该检查浏览器支持或者使用 babel 进行转译。

- Adam Wolski

---

问题比较复杂，你的解决方案只是一个变通方法，因为想象一下，如果不是执行活动的按钮，而是显示引导对话框的函数，那么一切都会不同。 - AgainMe

@AgainMe 不确定你的意思是什么。 - Adam Wolski

让我更好地解释一下，我的引导对话框是通过按下按钮调用的函数显示的。现在这个函数返回一个值，但在它返回值之前，我需要停止函数，因为当引导对话框显示时，我需要等待用户选择，然后从允许我以另一种方法执行任务的函数返回值。如果不清楚，我可以给你举个例子。 - AgainMe

@AgainMe JavaScript 是一种异步语言，所有操作都基于事件和回调函数。不过，有一些方法可以使其看起来像同步操作，比如使用 Promise。您愿意使用 ES6 吗？ - Adam Wolski

让我们在聊天中继续这个讨论。 - AgainMe

Answer 2

我很好地理解了这个问题。 纯Typescript的解决方案看起来像这样：

const result: boolean = confirm(message);
                if (result == true) {
                    return ConfirmationResult.ConfirmationResultPositive;
                } else {
                    return ConfirmationResult.ConfirmationResultNegative;
                }

其中ConfirmationResult.ConfirmationResultPositive是一个枚举类型。 confirm函数显示标准的js窗口并等待用户结果（阻止进一步执行）。不幸的是，bootstrap没有这个标准功能。例如，WinForms、WPF和UMP（清晰异步）具有相同的标准行为。 我还认为，使用Promise<>，我们可以通过bootstrap模态框来解决它。

- Sergey Orlov