javascript - 第二个 zurb 显示模态窗口 - 可能吗？

Question

我正在使用 Zurb 的 Reveal 在网页上显示模式窗口。

我必须在已经打开的模态窗口（后者包含一个表单）上显示一个小的模态窗口。

我添加onclick="$('#ypopup').reveal();"到表单上的一个a元素，并将#ypopup（第二个模态 div）的 z-index 设置为 9999。这样第二个模态显示得很好。

但是当我关闭它时，不仅第二个模态消失了，而且第一个模态的背景也消失了。第一个模态仍然可见，但不能关闭。只有页面重新加载有帮助。

是否可以在打开的显示模式窗口上有第二个显示模式？

Answer 1

我会说不。查看 jQuery 代码，模态背景似乎只是一个实例。当您关闭任何模式时，它会关闭页面上唯一的模式背景。您将需要修改插件以使其正常工作。

源代码可以在这里找到：https ://github.com/zurb/foundation/blob/master/vendor/assets/javascripts/foundation/jquery.foundation.reveal.js

Answer 2

将此添加到您的代码中：

$(document).on('closed.fndtn.reveal',function() { $('.reveal-modal').removeClass('toback'); })

这将导致所有显示都在显示背景之上，从而拉动您的第一个显示。

Answer 3

...完全没有问题！

试试这个...

1. 给每个模态一个唯一的 id#... myModal1, myModal2, myModal3...等...

2. 在文档中为每个模式添加一个单独的 jquery 函数......并相应地更改分区。

$(文档).ready(函数() {

 $('#at-button1').click(function(e) {
      e.preventDefault();
  $('#myModal1').reveal();
 });

  $('#at-button2').click(function(e) {
      e.preventDefault();
  $('#myModal2').reveal();
 });

 $('#at-button3').click(function(e) {
      e.preventDefault();
  $('#myModal3').reveal();
 });