Multiple Bourbon Refills Modals

Question

I have a layout that is using the Bourbon Refills UI elements and I have a question regarding modals. More specifically, I have a case where I need multiple modals opened at once.

So...this is what is supposed to happen: A user clicks on a button that opens a normal Bourbon Refills Modal. Within that modal, the user has the option to click on a button to open an additional settings modal.

Currently I have one main modal and one nested inside of it. Sadly, the nested modal is constrained within the bounds of the first in Webkit and Gecko browsers. On IE...it doesn't at all :(

Is there any other way of pulling this off with Refills? I was thinking...maybe assigning a click event to the button to open a second (separate) modal that would sit on top of the first in z-index order?

Thanks in advance for your help - any is appreciated.

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

score 0 · Answer 1 · answered Oct 16 '17 at 00:01

OK, I figured it out. Admittedly, this threw me off a bit because these are not JS-powered modals, but instead they rely on the ability to style an an element based on a hidden checkbox and its sibling element (in this case: < label >)

Easy-peasy. All we need to do is separate the modals and assign the :checked state to the hidden checkbox of the modal we want to open. For example:

First, separate the modals as you normally would. Then in Modal 1, create the link/button you want to have users click to open Modal 2. For the sake of argument, we will give it an ID of #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>

Now...write a little bit of jQuery to assign the :checked state to the appropriate modal.

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

Done. Now the second modal opens up correctly over the first. I just tested this and it works in most browsers (including IE9-11) since we're not doing anything different from the base refills modals.

Multiple Bourbon Refills Modals

1 Answers1