Question

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

单击任何按钮确实会打开模式而不会出现问题。但是，当我们关闭模式时 - 通过点击“关闭”＆＃39;模态内的按钮，或者按下Esc＆＃39;在键盘上 - 页面自动滚动到页面上最后一个按钮的位置，该页面是模态的触发器。似乎在关闭＆＃39;模态是强制视口滚动到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

@Thomas Jefferson关于为什么会这样做的解释是正确的，但他的解决方案并不令人满意。要解决此问题，您必须自己手动打开模态。

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

然后添加此javascript：

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

Answer 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()，现在它对我来说很好。

Same Foundation 6的多个触发器显示模式导致关闭时不需要的滚动

2 个答案: