基金会模态开放问题

我有两个模态（基础）。我想根据另一个复选框中设置的值使用单个按钮打开它们。目前，我已将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

基金会模态开放问题

回答

相关问题