JS模态窗口（弹出窗口）之间的通信

Question

在您看来， MODAL A 和 MODAL B 之间进行通信的最佳方式（或某些方式）是什么？ - 他们不要同时存在。一打开另一个。

<小时/>

---

需要做什么：

（在这个非常具体的案例中，但有很多案例）

MODAL A 触发（打开） MODAL B ，其中用户从列表中选择内容，然后在申请后，他将被发送回 MODAL A （基本上是触发当前模态的最后一个模态），现在 MODAL A 需要显示从 MODAL B 中选择的数据

将数据从B传递到A的方法：

• 使用某种临时localstorage或某些共享内存对象， MODAL A 将始终检查它何时启动，并采取行动（然后清除它）。此对象将始终存储另一个弹出窗口中可能需要的任何数据，并且如果某个弹出窗口需要与另一个弹出窗口相关的数据，则该弹出窗口将知道检查该对象以获取所需的内容。

• MODAL B 会将一些数据直接传递给MODAL，它应该通过一些数据打开，这些数据将附加到打开回调的按钮上，看起来像这样：btw：
  <a data-modal="lastModal">Continue</a>

你还有其他想法吗？也许更好的？

<小时/>

更新

最后，我所做的是在内存中存储封闭的模态窗口（触发MODAL B的窗口）并使用自定义事件发布MODAL A的控制器将订阅的任何数据，并将更改因此，当DOM在内存中时，它的视图，所以一旦从我的历史逻辑数组中恢复MODAL A，它就会被更新。一个所有模态都关闭，历史对象被清除。

Answer 1

这是在使用事件的其他GUI平台上解决的。您可以广播其他区域的数据以便接收，这样您就可以缩放模态实例，而不必依赖于硬编码的密钥或对象文字。

模式A可以监听事件 modal.capture-data ，而模式B可以在单击应用按钮时发出事件 modal.capture-data 。 / p>

现在，当您向其中添加更多模态时，您可能需要添加一些凭据检查或特定事件，以确定何时应用收到的数据。

还有大量的JS库来处理自定义事件：jQuery，Angular（基于$scope/$rootScope）或EventEmitter。

Answer 2

<强>更新 因为你说你不使用棱角分明。这是另一个aproche。

全球功能但不推荐 ：

创建一个执行欲望更新的全局函数，当单击该复选框时，执行该函数。

function UpdateModalAbackgroundImage(imageUrl)
{
// update here...
}

现在当你点击复选框时执行该功能。

// I suppose your are using jquery at least
$('.mycheckboxs').click(function(){
// some logic

UpdateModalAbackgroundImage(mycustomurl)// since is global, you can execute it.
});

确保在将模式B附加到正文时定义 UpdateModalAbackgroundImage 函数。