Modales de recharges Bourbon multiples

Question

J'ai une mise en page qui utilise les éléments de l'interface utilisateur Bourbon Refills et j'ai une question concernant les modaux. Plus précisément, j'ai un cas où j'ai besoin de plusieurs modaux ouverts à la fois. Donc, voici ce qui est supposé arriver: Un utilisateur clique sur un bouton qui ouvre un Bourbon Refills Modal normal. Dans ce modal, l'utilisateur a la possibilité de cliquer sur un bouton pour ouvrir un modal supplémentaire.

Actuellement, j'ai un modal principal et un imbriqué à l'intérieur de celui-ci. Malheureusement, le modal imbriqué est contraint dans les limites de la première dans les navigateurs Webkit et Gecko. Sur IE ... ce n'est pas du tout :(

Existe-t-il une autre façon de retirer cela avec Refills? Je pensais ... peut-être assigner un événement de clic sur le bouton pour ouvrir une seconde (séparé) modal qui siègerait au-dessus du premier dans l'ordre z-index

Merci à l'avance pour votre aide -.. tout est apprécié

<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

OK, j'ai tout compris Certes, cela me jeta un peu parce que ce ne sont pas des modaux basés sur JS, mais ils se basent sur la possibilité de styler un élément basé sur une case cachée et son élément frère (dans ce cas: < label>)

Facile à faire. Tout ce que nous devons faire est de séparer les modaux et d'assigner l'état: checked à la case cachée du modal que nous voulons ouvrir. Par exemple:

D'abord, séparez les modaux comme vous le feriez normalement. Ensuite, dans Modal 1, créez le lien/bouton que vous voulez que les utilisateurs cliquent pour ouvrir Modal 2. Par souci d'argument, nous lui donnerons un identifiant de #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>  

maintenant ... écrire un peu de jQuery pour attribuer: vérifier l'état du modal approprié.

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

Terminé. Maintenant, le deuxième modal s'ouvre correctement sur le premier. Je viens de tester cela et cela fonctionne dans la plupart des navigateurs (y compris IE9-11) puisque nous ne faisons rien d'autre que les modals de recharges de base.