多种波旁威士忌补充模式

Question

>我有一个使用波旁威士忌填充UI元素的布局，我有一个关于模态的问题。 更具体地说，我有一个需要一次打开多个模态的情况。

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

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

有没有其他方法可以用笔芯做到这一点？我在想。。。也许为按钮分配一个单击事件以打开第二个（单独的）模式，该模式将按 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），因为我们所做的与基本填充模式没有任何不同。