多个波旁威士忌补充模式

Question

我有一个使用 Bourbon Refills UI 元素的布局，我有一个关于模态的问题。更具体地说，我有一个需要一次打开多个模式的情况。

所以...这就是应该发生的事情：用户点击一个按钮，打开一个普通的 Bourbon Refills 模式。在该模式中，用户可以选择单击按钮以打开其他设置模式。

目前我有一个主要模式和一个嵌套在其中的模式。可悲的是，嵌套模式被限制在 Webkit 和 Gecko 浏览器中的第一个范围内。在 IE 上......它根本没有:(

还有没有其他方法可以通过 Refills 来解决这个问题？我在想...也许为按钮分配一个点击事件以打开第二个（单独的）模态，该模态将按 z-index 顺序位于第一个模态的顶部？

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

   <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>   

Answer 1

好的，我想通了。诚然，这让我有点失望，因为这些不是 JS 驱动的模式，而是它们依赖于基于隐藏的复选框及其兄弟元素（在本例中为 ）设置元素样式的能力

简单易行。我们需要做的就是分离模态并将 :checked 状态分配给我们要打开的模态的隐藏复选框。例如：

首先，像往常一样分离模态。然后在模态 1 中，创建您希望用户单击以打开模态 2 的链接/按钮。为了论证，我们将给它一个 ID 为#update。

  <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>     

现在...编写一点 jQuery 来将 :checked 状态分配给适当的模式。

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

完成。现在第二个模态在第一个上正确打开。我刚刚对此进行了测试，它适用于大多数浏览器（包括 IE9-11），因为我们没有做任何与基本填充模式不同的事情。