多种波旁威士忌补充款式

Question

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

所以...这是应该发生的情况：用户单击一个按钮将打开一个普通的波旁威士忌加油模式。 在该模式下，用户可以选择单击按钮以打开其他设置模式。

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

还有其他方法可以通过笔芯实现这一目标吗？ 我在想...可能是将click事件分配给按钮以打开第二个（单独的）模态，该模态将按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的模式，而是它们依赖于基于隐藏的复选框及其同级元素（在本例中为<label>）对元素进行样式设置的能力。

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

首先，像往常一样分离模态。 然后在Modal 1中，创建要让用户单击以打开Modal 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）中都可以使用，因为我们与基本笔芯模式没有任何不同。