Plusieurs déclencheurs pour la même base 6 Reveal Modal Cause indésirable Faire défiler Fermer

Question

J'ai une page d'atterrissage avec une seule modalité Foundation 6 Reveal. Le modal contient le formulaire de contact pour la page. Ce modal, par conséquent, peut être déclenché par plusieurs boutons qui apparaissent dans différents endroits de la page. Tous les boutons doivent ouvrir le même modal "Formulaire de contact".

En cliquant sur l'un des boutons ouvre en effet le modal sans problème. Toutefois, lorsque nous fermer le modal - soit en cliquant sur le bouton «fermer» dans le modal, ou en appuyant sur «Echap» sur le clavier - la page défile automatiquement à la position du dernier bouton sur la page que est un déclencheur pour le modal. Il semble que sur 'close' le modal force la fenêtre à défiler jusqu'au dernier déclencheur dans le DOM!

De toute évidence, ce comportement est indésirable - comme la plupart du temps le visiteur ne va pas être ouvrir le modal en cliquant sur le bouton dernier ...

Ce problème est illustré ce CodePen: https://codepen.io/icouto/pen/QgJzoJ

résumé code:

<!-- 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> 

Si vous cliquez sur le bouton du haut pour ouvrir le modal, puis fermez le modal, vous serez automatiquement pris au bas de la page ...

Est-ce que je fais quelque chose qui ne va pas? Y a-t-il quelque chose que j'ai manqué? Existe-t-il une solution de contournement pour cela qui n'implique pas de placer plusieurs copies du modal, à côté de chaque déclencheur?

Toutes les indications sont appréciées!

Answer 1

J'ai rencontré le même problème et je n'ai pas trouvé de correctif sur le site zurb.

Le problème semble être que la méthode proche de la révélation objet tente de mettre le focus sur l'ancre qui a ouvert (this.$anchor.focus() sur la dernière ligne):

{ 
     key: "close", 
     value: function() { 
      function t() { 
       e.isMobile ? (0 === u()(".reveal:visible").length && u()("html, body").removeClass("is-reveal-open"), 
       e.originalScrollPos && (u()("body").scrollTop(e.originalScrollPos), 
       e.originalScrollPos = null)) : 0 === u()(".reveal:visible").length && u()("body").removeClass("is-reveal-open"), 
       d.a.releaseFocus(e.$element), 
       e.$element.attr("aria-hidden", !0), 
       e.$element.trigger("closed.zf.reveal") 
      } 
      if (!this.isActive || !this.$element.is(":visible")) 
       return !1; 
      var e = this; 
      this.options.animationOut ? (this.options.overlay && f.a.animateOut(this.$overlay, "fade-out"), 
      f.a.animateOut(this.$element, this.options.animationOut, t)) : (this.$element.hide(this.options.hideDelay), 
      this.options.overlay ? this.$overlay.hide(0, t) : t()), 
      this.options.closeOnEsc && u()(window).off("keydown.zf.reveal"), 
      !this.options.overlay && this.options.closeOnClick && u()("body").off("click.zf.reveal"), 
      this.$element.off("keydown.zf.reveal"), 
      this.options.resetOnClose && this.$element.html(this.$element.html()), 
      this.isActive = !1, 
      e.options.deepLink && (window.history.replaceState ? window.history.replaceState("", document.title, window.location.href.replace("#" + this.id, "")) : window.location.hash = ""), 
      this.$anchor.focus() 
     } 
    } 

Mais $anchor juste se prépare à une tableau de tous les éléments avec les déclencheurs de données bascule/ouverte données pour révéler que:

this.$anchor = u()('[data-open="' + this.id + '"]').length ? u()('[data-open="' + this.id + '"]') : u()('[data-toggle="' + this.id + '"]'), 

Il en résulte $anchor.focus() mettant l'accent sur le dernier élément de la respective données-bascule ou de déclenchement de données ouverte.

Je viens de commenter this.$anchor.focus() de la méthode close et ça marche bien pour moi maintenant.

Answer 2

L'explication de Thomas Jefferson quant à pourquoi cela se produit est correcte, mais sa solution est insatisfaisante. Pour surmonter cela, vous devrez ouvrir manuellement le Modal vous-même.

Remplacer class="button" data-open="exampleModal1" par class="button trigger-example-modal".

puis ajoutez ce javascript:

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