等待来自Javascript模态的“返回值”

Wait for "return value" from Javascript modal

本文关键字：返回值 模态 Javascript 等待      更新时间：2023-09-26

好吧，我绝不是JavaScript大师，也许我还在考虑桌面软件开发，但这就是我想要实现的目标：

  • 我正在使用Twitter Bootstrap的模态
  • 在某些情况下，在采取行动之前，我想用"你确定吗？（是/否）模式对话框。

问题：

  • 内在逻辑应该是什么？

我的意思是：

  • 用户单击按钮 A（最终执行操作 A）
  • 我想启动模态，等待输入（2 个按钮中的任何一个 - 是/否）和/或在执行（或不执行）操作之前将其传递给某个检查例程A

这是我的模态HTML代码（按钮是否应该 - 以某种方式 - 通过其onclick javascript例程起作用？） - 还要注意#confirmMessage将是可变的。

<div class="modal fade hide" id="confirmAlert">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h3 id="confirmTitle">Are you sure?</h3>
    </div>
    <div class="modal-body">
        <p id="confirmMessage">Body</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Cancel</a>
        <a href="#" class="btn btn-danger">Yes</a>
    </div>
</div>

只是一个想法：

  • 编写一个类似于checkBeforeExec(message,functionToExec)的函数
    • 将
  • #confirmMessage设置为消息，将"是"的 href 设置为javascript:functionToExec
  • 意义？

我知道这听起来可能有点令人困惑 - 但我根本不知道最友好的 javascript 方法是什么......

我围绕模态创建了一个对话框管理器，其中包含confirm辅助函数，该函数基本上是执行以下操作的：

var callback = function(result) {
  alert(result);
}); // define your callback somewhere
$('#confirmAlert').on('click', '.btn, .close', function() {
  $(this).addClass('modal-result'); // mark which button was clicked
}).on('hidden', function() {
  var result = $(this).find('.modal-result').filter('.btn-danger').length > 0; // attempt to filter by what you consider the "YES" button; if it was clicked, result should be true.
  callback(result); // invoke the callback with result
});

此外，您应该同时将"取消"和"是"按钮data-dismiss="modal"。

这是一个小提琴，带有我的对话框管理器的简单示例。

请注意，如果您使用的是 Bootstrap 3，则应向 hidden.bs.modal 事件添加处理程序，而不是 hidden 。

使用 jquery，您可以使用类似的东西

$('.btn').click(function(){
   val=$(this).val()
   if(val=='Yes'){
     //continue the processing
   }
})

现在已经很晚了，但我们有一个可以实现结果的库。 https://sweetalert2.github.io/

Sweetalert将轻松执行这些操作。

相关文章：