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

前端之家收集整理的这篇文章主要介绍了等待来自Javascript模态的“返回值”前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
好的,我绝对不是一个 JavaScript大师,也许我还在思考桌面软件开发,但这正是我想要实现的:

>我正在使用Twitter Bootstrap’s Modals
>在某些情况下,在发生动作之前,我想用“你确定吗? (是/否)模态对话框

题 :

>内在逻辑应该是什么?

我的意思是 :

>用户点击buttonA(最终执行actionA)
>我想启动模态,等待输入(两个按钮之一 – 是/否)和/或在执行(或不)动作A之前将其传递给某些检查例程

这是我的模式的HTML代码(应该是按钮 – 不知何故 – 通过他们的onclick JavaScript例程) – 还要注意#confirmMessage将是可变的.

  1. <div class="modal fade hide" id="confirmAlert">
  2. <div class="modal-header">
  3. <button type="button" class="close" data-dismiss="modal">x</button>
  4. <h3 id="confirmTitle">Are you sure?</h3>
  5. </div>
  6.  
  7. <div class="modal-body">
  8. <p id="confirmMessage">Body</p>
  9. </div>
  10. <div class="modal-footer">
  11. <a href="#" class="btn" data-dismiss="modal">Cancel</a>
  12. <a href="#" class="btn btn-danger">Yes</a>
  13. </div>
  14. </div>

只是一个想法:

>写一个函数,如checkBeforeExec(message,functionToExec)
>将#confirmMessage设置为消息,将’href设置为javascript:functionToExec
有意义吗?

我知道这可能听起来有点混乱 – 但我根本不知道最友善的JavaScript方式是什么?

解决方法

我创建了一个关于模态的对话管理器,确认帮助功能基本上是这样的:
  1. var callback = function(result) {
  2. alert(result);
  3. }); // define your callback somewhere
  4.  
  5. $('#confirmAlert').on('click','.btn,.close',function() {
  6. $(this).addClass('modal-result'); // mark which button was clicked
  7. }).on('hidden',function() {
  8. 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.
  9.  
  10. callback(result); // invoke the callback with result
  11. });

此外,您应该同时取消和是按钮数据 – dismiss =“模态”.

Here’s a fiddle,with a simple example of my dialog manager.

请注意,如果您使用的是Bootstrap 3,则应该向hidden.bs.modal事件添加一个处理程序,而不是隐藏.

猜你在找的JavaScript相关文章