多個波旁補充裝Modals

我有一個使用波本補充裝UI元素的佈局，我有一個關於模態的問題。更具體地說，我有一個情況，我需要一次打開多個模態。多個波旁補充裝Modals

所以......這是應該發生的事情：用戶點擊一個按鈕，打開一個正常的波旁補充模式。在該模式下，用戶可以選擇單擊按鈕來打開其他設置模式。

目前我有一個主模式和一個嵌套在裏面。令人遺憾的是，嵌套模式受限於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>

來源

2017-10-15 Jason455

OK，我理解了它無可否認，這把我摔下有一點是因爲它們不是JS驅動的模式，但是它們依賴於基於隱藏複選框及其同級元素來設置元素的風格（在這種情況下：< label>）

簡單易行。我們所需要做的就是將模態分開，並將：checked狀態分配給我們想要打開的模式的隱藏複選框。例如：

首先，按照通常情況分開模態。然後在Modal 1中，創建你想讓用戶點擊打開Modal 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的一點點來分配：選中狀態，以適當的模式。

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

完成。現在第二種模式在第一種模式下正確打開。我只是測試了這個，它在大多數瀏覽器（包括IE9-11）中都能正常工作，因爲我們沒有做任何與基本補充模式不同的任何操作。

來源

2017-10-16 00:01:23 Jason455

多個波旁補充裝Modals

回答

相關問題