Foundation Modal opening issue

Question

I have two modals (Foundation). I want to open them with a single button according to a value set in another checkbox. Currently, I have added data-open and data-reveal-id attribute to button and it is working fine for very first time. After that, although value to those attributes correctly added to button, it will only open last opened modal from that button. Am I missing something obvious here?

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

Answer 1

I'm going to guess that your problem lies with the way you are changing the button attributes / data (using direct binding $('#modal1').on('click', function () {//do stuff}); ) combined with the fact that you appear to be using the same ID twice (once in the button and once in the modal).

This works (as in the changing of the attributes and launching the right modal) but it doesn't take into account states where both checkboxes are checked as you didn't specify what would happen at that point.

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 (as this is used by Foundation to launch the modal, I have assumed you don't need a native JavaScript solution)

$('#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'
    });
  }
});

This script uses delegated events to make sure that it gets the latest changes to the DOM.

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

NB You could also launch the modal directly from the script using $('#modal1').foundation('open')