Javascript 多种波旁威士忌灌装模式

我有一个使用Bourbon Refills UI元素的布局，我有一个关于modals的问题。更具体地说，我有一个需要同时打开多个模态的例子

所以…这就是应该发生的事情：用户点击一个按钮，打开一个正常的波旁威士忌灌装模式。在该模式中，用户可以选择单击按钮打开其他设置模式

目前我有一个主模态和一个嵌套在其中的模态。遗憾的是，嵌套模式被限制在Webkit和Gecko浏览器中第一个模式的范围内。在IE上…它根本没有：(

有没有其他方法可以通过重新填充来实现这一点？我在想……也许可以为按钮指定一个单击事件，以打开第二个（单独的）模式，该模式将以z索引顺序位于第一个模式之上

提前感谢您的帮助-感谢您的帮助

   <div class="modal">

        <label for="modal-1">
          <div href="#" class="btn modal-trigger">Modal 1 Trigger Button</div>
        </label>
        <input class="modal-state modal-state-a" id="modal-1" type="checkbox" />
        <div class="modal-fade-screen modal-fade-a">
          <div class="modal-inner">
            <div class="modal-close modal-close-a" for="modal-1"></div>
            <h2>Modal 1 Title</h2>
            <label>Input Label</label>
            <input value="Input" />

            <!-- Begin Nested Modal 2 -->

              <div class="modal">
                <label for="modal-2">
                  <div href="#" class="btn modal-trigger">Modal 2 Trigger Button</div>
                </label>
                <input class="modal-state modal-state-b" id="modal-2" type="checkbox" />
                <div class="modal-fade-screen modal-fade-b">
                  <div class="modal-inner">
                    <div class="modal-close modal-close-b" for="modal-2"></div>
                    <h2>Modal 2 Title</h2>
                    <label>Input Label</label>
                    <input value="Input" />
                  </div>
                </div>
              </div>     

            <!-- End Nested Modal 2 -->

          </div>
        </div> 
      </div>   

模态1触发按钮
模式1标题
输入标签
模态2触发按钮
模式2标题
输入标签

好的，我想出来了。不可否认，这让我有点不舒服，因为这些不是JS支持的模态，而是依赖于基于隐藏复选框及其同级元素（在本例中：）设计元素样式的能力

简单。我们所需要做的就是分离模态，并将：选中状态指定给要打开的模态的隐藏复选框。例如：

首先，像通常一样分离模态。然后在模态1中，创建希望用户单击以打开模态2的链接/按钮。为了便于讨论，我们将为其提供一个ID#update

---

完成。现在第二个模式比第一个模式正确打开。我刚刚测试了这个，它在大多数浏览器（包括IE9-11）中都能正常工作因为我们没有做任何不同于基本重新填充模式的事情。

好吧，我明白了。无可否认，这让我有点不舒服，因为这些不是JS支持的模式，而是依赖于基于隐藏复选框及其同级元素（在本例中：）设计元素样式的能力

简单。我们所需要做的就是分离模态，并将：选中状态指定给要打开的模态的隐藏复选框。例如：

首先，像通常一样分离模态。然后在模态1中，创建希望用户单击以打开模态2的链接/按钮。为了便于讨论，我们将为其提供一个ID#update

完成。现在第二个模式比第一个模式正确打开。我刚刚测试了这个，它可以在大多数浏览器（包括IE9-11）中工作，因为我们没有做任何不同于基本重新填充模式的事情

  <div class="modal">
    <label for="modal-1">
      <div href="#" class="btn modal-trigger">Modal 1 Trigger Button</div>
    </label>
    <input class="modal-state modal-state-a" id="modal-1" type="checkbox" />
    <div class="modal-fade-screen modal-fade-a">
      <div class="modal-inner">
        <div class="modal-close modal-close-a" for="modal-1"></div>
        <h2>Modal 1 Title</h2>
        <label>Input Label</label>
        <input value="Input" />
        <a class="btn btn__active" id="update">Update</a> <!-- New Button to open Modal 2-->

      </div>
    </div> 
  </div>   

          <div class="modal">
            <label for="modal-2">
              <div href="#" class="btn modal-trigger">Modal 2 Trigger Button</div>
            </label>
            <input class="modal-state modal-state-b" id="modal-2" type="checkbox" />
            <div class="modal-fade-screen modal-fade-b">
              <div class="modal-inner">
                <div class="modal-close modal-close-b" for="modal-2"></div>
                <h2>Modal 2 Title</h2>
                <label>Input Label</label>
                <input value="Input" />
              </div>
            </div>
          </div>     

$("#update").click(function() {
    var modalTrigger = $("input#modal-2");
    modalTrigger.prop("checked", !modalTrigger.prop("checked"));
});