複数のバーボン補充モール

Question

私はバーボン補充UIエレメントを使用しているレイアウトを持っており、モーダルに関する質問があります。具体的には、一度に複数のモーダルを開く必要がある場合があります。

だからこれは起こりそうなことです：ユーザーは通常のBourbon Refills Modalを開くボタンをクリックします。そのモーダル内で、ユーザはボタンをクリックして追加の設定モーダルを開くことができます。

現在、私は1つのメインモーダルと1つのネストを持っています。悲しいことに、ネストされたモーダルは、WebkitとGeckoのブラウザの最初の境界内で制限されています。 IEで...それはまったくありません:(

私は考えていましたか...おそらくボタンにクリックイベントを割り当てて別の（別の）ボタンを開くと、 ？Zインデックスの順序で最初の上に座る、あなたの助けを事前に

感謝をモーダル - 。。いずれかが高く評価され

<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が、私はそれを考え出した確かに、これは私を投げましたこれはJSで動くモーダルではなく、隠しチェックボックスとその兄弟要素（この場合は< label>）に基づいて要素をスタイルする能力に依存しているためです。

Easy-peasy。私たちが行う必要があるのは、モーダルを分離し、：checked状態を、開きたいモーダルの隠しチェックボックスに割り当てるだけです。例：

最初に、モーダルを通常通りに区切ります。 Modal 1では、ユーザーがModal 2を開くためにクリックするリンク/ボタンを作成します。引数のために、#updateのIDを与えます。今

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

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

...割り当てるためのjQueryを少し書き：適切なモーダルの状態をチェックします。

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

完了。今度は、第2モーダルが最初のモーダルを正しく開くようになります。私はちょうどこれをテストし、ベースの補充モーダルとは何もしていないので、ほとんどのブラウザ（IE9-11を含む）で動作します。