Несколько триггеров для одного и того же основания 6 Выявить модальную причину Нежелательная прокрутка при закрытии

У меня есть целевая страница с одним модалом 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>

Если вы нажмете верхнюю кнопку, чтобы открыть модальное окно, а затем закроете модальное, вы автоматически попадете в нижнюю часть страницы...

Я делаю что-то явно неправильно? Я что-то пропустил? Есть ли обходной путь для этого, который не предполагает размещения нескольких копий модальных, рядом с каждым триггером?

Любое руководство приветствуется!

Источник

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 просто устанавливается в массив всех элементов с триггерами data-toggle/data-open для этого:

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

Это приводит к $anchor.focus() фокусируясь на последнем элементе с соответствующим триггером переключения данных или открытия данных.

Я только что закомментировал this.$anchor.focus() из метода close, и теперь он отлично работает для меня.

Источник

@ Томас Джефферсон объяснил, почему это происходит правильно, но его решение неудовлетворительное. Чтобы преодолеть это, вам нужно будет вручную открыть модал.

замещать class="button" data-open="exampleModal1" с class="button trigger-example-modal",

Затем добавьте этот JavaScript:

$('.trigger-example-modal').on('click', function() {
  $('#exampleModal1').foundation('open');
});
Источник
Другие вопросы по тегам