2

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

单击任何按钮确实可以毫无问题地打开模式。但是，当我们关闭模态框时——无论是通过单击模态框内的“关闭”按钮，还是通过按键盘上的“Esc”键——页面会自动滚动到页面上最后一个按钮的位置，该按钮是触发模态的。似乎在“关闭”时，模式会强制视口滚动到 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>

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

我在做一些明显错误的事情吗？有什么我错过的吗？是否有一种解决方法，不涉及在每个触发器旁边放置多个模态副本？

任何指导表示赞赏！

4

2 回答 2

8

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

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

然后添加这个javascript：

$('.trigger-example-modal').on('click', function() {
  $('#exampleModal1').foundation('open');
});
于 2017-09-14T21:59:37.313 回答
2

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

问题似乎是显示对象的 close 方法试图将焦点重新设置在打开它的锚上（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只是设置为所有元素的数组，其中包含用于显示的数据切换/数据打开触发器：

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

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

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

于 2017-08-04T16:46:08.017 回答