同一基础 6 的多个触发器显示模式导致关闭时不需要的滚动

Question

我有一个带有单个 Foundation 6 Reveal 模态的登录页面。模式包含页面的联系表单。因此，该模式可以由出现在页面不同位置的多个按钮触发。所有按钮都应打开相同的 'Contact Form' 模式。

点击任何按钮确实可以毫无问题地打开模式。但是，当我们关闭模态框时 - 通过单击模态框内的 'close' 按钮，或在键盘上点击 'Esc' - 页面会自动滚动到最后一个按钮 在页面上的位置，它是模式的触发器。似乎在 'close' 上，模态正在强制视口滚动到 DOM 中的最后一个触发器！

显然，这是不需要的行为 - 因为大多数时候访问者不会通过单击最后一个按钮来打开模式...

这个问题用这个CodePen来说明： https://codepen.io/icouto/pen/QgJzoJ

代码摘要：

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

如果您点击顶部按钮打开模态框，然后关闭模态框，您将自动转到页面底部...

我做错了什么吗？我错过了什么吗？是否有解决方法，不涉及在每个触发器旁边放置多个模态副本？

感谢任何指导！

Answer 1

我遇到了同样的问题，但在 zurb 网站上找不到任何修复程序。

问题似乎是显示对象的关闭方法试图将焦点设置回打开它的锚点（this.$anchor.focus() 最后一行）：

{
        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()
        }
    }

但是 $anchor 只是被设置为所有元素的数组，其中 data-toggle/data-open 触发器显示：

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

这导致 $anchor.focus() 关注具有相应数据切换或数据打开触发器的最后一个元素。

我刚刚从 close 方法中注释掉了 this.$anchor.focus()，它现在对我来说工作正常。

Answer 2

@Thomas Jefferson 关于为什么会发生这种情况的解释是正确的，但他的解决方案并不令人满意。要克服这个问题，您必须自己手动打开模态框。

将 class="button" data-open="exampleModal1" 替换为 class="button trigger-example-modal"。

然后添加此 javascript：

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

同一基础 6 的多个触发器显示模式导致关闭时不需要的滚动

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

modal-dialog

zurb-foundation

autoscroll

zurb-foundation-6

zurb-reveal