modal-dialogzurb-foundationautoscrollzurb-foundation-6zurb-reveal

Multiple Triggers for Same Foundation 6 Reveal Modal Cause Unwanted Scroll on Close

I have a landing page with a single Foundation 6 Reveal modal. The modal contains the Contact Form for the page. That modal, therefore, can be triggered by several buttons that appear in different locations on the page. All the buttons should open the same 'Contact Form' modal.

Clicking on any of the buttons indeed opens the modal without a problem. However, when we close the modal - either by clicking on the 'close' button inside the modal, or by hitting 'Esc' on the keyboard - the page automatically scrolls to the position of the last button on the page that is a trigger for the modal. It seems that on 'close' the modal is forcing the viewport to scroll to the last trigger in the DOM!

Obviously, this is unwanted behaviour - as most of the times the visitor is not going to be opening the modal by clicking on the very last button...

This problem is illustrated this CodePen: https://codepen.io/icouto/pen/QgJzoJ

Code summary:

<!-- first trigger button -->
<p><button id="btn1" class="button" data-open="exampleModal1">Click me for a modal</button></p>

<!-- lots of filler text to make the page long -->
<p>lorem ipsum dolor sit amet, etc. etc. etc. </p>

<!-- second trigger button -->
<p><button id="btn2" class="button" data-open="exampleModal1">Click me for a modal</button></p>

<!-- modal window -->
<div class="reveal" id="exampleModal1" data-reveal>
  <h1>Awesome. I Have It.</h1>
  <p class="lead">Your couch. It is mine.</p>
  <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

If you click the top button to open the modal, then close the modal, you will automatically be taken to the bottom of the page...

Am I doing something obviously wrong? Is there something I've missed? Is there a workaround for this that doesn't involve placing multiple copies of the modal, next to every trigger?

Any guidance is appreciated!

Solution

  • @Thomas Jefferson's explanation as for why this is happening is correct, but his solution is unsatisfactory. To overcome this you will have to manually open the Modal yourself.

    Replace class="button" data-open="exampleModal1" with class="button trigger-example-modal".

    Then add this javascript: 

    $('.trigger-example-modal').on('click', function() {
  $('#exampleModal1').foundation('open');
});