基金會模態開放問題

我有兩個模態（基礎）。我想根據另一個複選框中設置的值使用單個按鈕打開它們。目前，我已將data-open和data-reveal-id屬性添加到按鈕，並且它第一次正常工作。在那之後，雖然對正確添加到按鈕的屬性的值，它只會從該按鈕打開最後打開的模式。我在這裏錯過了很明顯的東西嗎基金會模態開放問題

<button class="button" data-open="modal1" id="modal1" data-reveal-id="modal1">Open Modal</button>

來源

2016-08-02 suresh726

我要去猜測，你的問題在於要更改的按鈕屬性的方法/數據（使用直接結合$('#modal1').on('click', function() {//do stuff});）與你似乎是使用相同的ID兩次（一次的事實相結合在按鈕中，一次在模式中）。

這是可行的（如改變屬性並啓動正確的模式），但它沒有考慮到兩個複選框都被選中的狀態，因爲你沒有指定在那一點會發生什麼。

HTML

<div id="wrapper"> 
    <div class="row"> 
    <fieldset class="large-12 columns"> 
     <legend>Choose an option</legend> 
     <input id="checkbox1" type="checkbox"> 
     <label for="checkbox1">Option 1</label> 
     <input id="checkbox2" type="checkbox"> 
     <label for="checkbox2">Option 2</label> 
    </fieldset> 
    <button class="button" data-open="" id="modalOpen" data-reveal-id="">Open Modal</button> 
    </div> 
</div> 
<div class="reveal" id="modal1" data-reveal> 
    <h1>You picked option ONE</h1> 
    <p>Sed sit amet tellus vitae lectus euismod porta. Aliquam convallis ipsum metus, et interdum lorem ultrices a. Donec molestie lacus in lobortis auctor. Praesent eu urna sit amet tortor venenatis accumsan. Vestibulum mattis nunc sit amet ex tempor cursus. 
    Vivamus nec dapibus purus. Nunc eu diam at sapien hendrerit bibendum. Quisque interdum erat turpis, eget sodales orci efficitur a. Phasellus nec orci at tortor vulputate blandit. Nunc elementum felis quis felis varius mollis ut vitae libero.</p> 
    <button class="close-button" data-close aria-label="Close modal" type="button"> 
    <span aria-hidden="true">&times;</span> 
    </button> 
</div> 
<div class="reveal" id="modal2" data-reveal> 
    <h1>You picked option TWO</h1> 
    <p>Nam sed velit quis tortor luctus feugiat. Aenean vestibulum diam massa, at feugiat elit tempus ut. Aliquam ultricies elit ut ante tristique rhoncus. Donec fringilla magna id ante varius, elementum fringilla nibh scelerisque. Maecenas euismod sagittis 
    turpis, nec blandit augue finibus eget. Cras nec dui ultricies, condimentum nisl in, finibus odio. Etiam luctus mattis aliquet. Integer aliquam lorem nec consequat finibus. Proin varius purus neque, ut imperdiet eros dignissim ac. Pellentesque ultrices 
    tristique sagittis. Morbi et nunc hendrerit turpis eleifend semper eu sit amet enim. Vestibulum placerat id odio a pellentesque. Proin eu metus nec ex commodo posuere iaculis pretium diam.</p> 
    <button class="close-button" data-close aria-label="Close modal" type="button"> 
    <span aria-hidden="true">&times;</span> 
    </button> 
</div>

JQUERY （因爲這是使用基金會發起的模式中，我假設你不需要本地JavaScript解決方案）

$('#wrapper').on('click', '#modalOpen', function() { 
    if ($('checkbox1').is(':checked')) { 
    $(this).attr({ 
     'data-open': 'modal1', 
     'data-reveal-id': 'modal1' 
    }); 
    } else { 
    $(this).attr({ 
     'data-open': 'modal2', 
     'data-reveal-id': 'modal2' 
    }); 
    } 
});

此腳本使用delegated events以確保它獲得DOM的最新更改。

事件代理允許我們將一個事件監聽器附加到父元素，該父元素將觸發所有與選擇器匹配的後代，無論這些後代是現在存在還是將來都會添加。

N.B.您也可以直接從腳本啓動模式，使用$('#modal1').foundation('open')

來源

2016-08-04 09:47:28 tymothytym

基金會模態開放問題

回答

相關問題