Question

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

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

目前我有一个主模式和一个嵌套在其中。遗憾的是，嵌套模式在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驱动的模态，而是依赖于基于隐藏的复选框及其兄弟元素（在这种情况下：＆lt; label＆gt;）来设置元素样式的能力< / p>

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

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

  <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），因为我们没有做任何与基本笔芯模态不同的东西。

多个波旁填充物模态

1 个答案: