Foundation-sites: Показать модальное позиционирование?

У вас есть ссылка, по которой мы можем помочь разобраться в происходящем?

Дайте мне запустить его, чтобы вы могли его просмотреть, а затем я пришлю вам сообщение с данными для входа.

Хорошо, я отправляю вам подробности в личном сообщении.

Я думаю, вы установили правило в своем CSS .column, .columns {position: relative;}

Модальное окно открытия позиционируется как абсолютное. Я не знаю, почему он не фиксируется. Возможно включить прокрутку?

Итак, модальное окно с абсолютным позиционированием выравнивается по первому расположенному родительскому объекту (class = "восемь столбцов"). Вы можете попробовать добавить css вот так ...

.reveal-modal {положение: исправлено;)

и посмотрите, работает ли это так, как вы этого хотите.

Ok. Это строка 17 файла grid.css Foundation.

Ok. я не мог прочитать ваши имена файлов. Я просто пользователь, а не разработчик zurb. Вы можете попробовать фиксированную вещь или отключить модальный div и поместить его в конец html.

На самом деле, я переключился на ColorBox для модальных окон и просто хотел сообщить об ошибке (если это ошибка, а не моя ошибка). Благодарим за помощь в обнаружении проблемы! Я часами возился с ним, но не мог найти проблему.

Честно говоря, я не могу проследить закулисную сторону этого конвоирования :) Есть ли ошибка в Reveal или это конфликт с другими стилями?

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

Похоже, вы могли бы установить по умолчанию для раскрытия-модального значение position: fixed , но я не знаю, есть ли у вас причина против этого.

Ой, попался. Да, модальные окна Reveal предназначены для размещения в конце страницы, а не внутри макета - мы используем абсолютный, а не фиксированный, чтобы вы могли продолжать прокрутку страницы (если хотите). Однако изменение этого на position: fixed исправит это.

Тогда, наверное, лучше всего упомянуть об этом в документации.

30 ноября 2011 г. в 19:14 Джонатан

Ой, попался. Да, модальные окна Reveal предназначены для размещения в конце страницы, а не внутри макета - мы используем абсолютный, а не фиксированный, чтобы вы могли продолжать прокрутку страницы (если хотите). Однако изменение этого на position: fixed подойдет.

---

Ответьте на это письмо напрямую или просмотрите его на GitHub:
https://github.com/zurb/foundation/issues/129#issuecomment -2968907

@ smileyj68 любая идея, что делает position: relative в .column, .columns в grid.css? Положение: исправлено в модальном раскрытии - не лучший вариант при работе с отзывчивым сайтом, так как вам действительно нужна прокрутка на нем. Я собираюсь попробовать перезаписать это здесь локально и проверить, не сломалось ли что-нибудь. Но если у вас есть какие-то идеи, я бы хотел это услышать.

Этот вопрос меня тоже укусил. Желаю, чтобы это было задокументировано ...

И я, хорошая работа за этот комментарий. В документации говорится, что нужно ставить его после всего, но при использовании с Wordpress это означает в нижнем колонтитуле. Было бы удобно, если бы там было сказано, зачем это делать.

Я тоже. После установки в положение: фиксировано; и переполнение: прокрутка; все обошлось.

Любое решение ?! Установить фиксированное положение - не лучшая идея, если ваш модальный файл большой. Если кто найдет решение, напишите сюда. Спасибо!

У меня все еще есть эта проблема :(! Любое решение? PLZ

Установка фиксированного положения не работает

Мне удалось заставить его работать. переключение с абсолютного позиционирования на фиксированное сработало, когда я открыл foundation.css и foundation.min.css и изменил позиционирование в классе .reveal-modal в обоих файлах следующим образом:

от абсолютного к фиксированному
- вверху: от 50 пикселей до 30% (вы можете изменить это, мне нужно было изменить его, чтобы он опустился достаточно далеко, чтобы видеть)

Это определенно проблема, если вы используете Foundation не только для статического HTML. My Foundation Theme Framework для Shopify также имеет проблемы с модальными всплывающими окнами для изображений продуктов. Использование .reveal-modal { position: fixed; overflow : scroll}, безусловно, помогает. Но это не настоящее решение. «Раскрытие» в этом случае может быть очень уродливым и непрактичным. Насколько я понимаю, никакое количество чистого CSS не исправит этого.

Проблема, с которой вы столкнулись, заключается в том, что на модальное окно Reveal влияет родительский элемент позиционирования в предыдущих выпусках, поэтому вы действительно должны иметь только модальное окно Reveal в качестве прямого дочернего элемента элемента body.

Вы не должны сталкиваться с этой проблемой с версией 4.3.2, поскольку она гарантирует, что модальное окно будет перемещено, чтобы стать прямым потомком body то время как модальное окно видно, что устраняет любые странные проблемы с позиционированием, которые в противном случае вызывает ваш CSS. .

Если вы видите это в 4.3.2, откройте заявку с примером, поскольку я внес определенные изменения, чтобы убедиться, что это работает правильно.

Я согласен с тем, что эти «модальные окна Reveal предназначены для размещения в конце страницы, а не в макете» должны быть помещены в документацию, потому что новички могут рассердиться на это упущение. Мне пришлось искать по всей сети, прежде чем я увидел комментарий @ smileyj68 Спасибо

@ chimdi2000 Начиная с 4.3.2, это больше не проблема, поскольку javascript переместит его за вас, если он у вас не окажется в нужном месте, поэтому я думаю, что дополнительная документация не нужна.

Спасибо за внимание @seantimm. Думаю, мне лучше немного обновить фреймворк тем Shopify Foundation 4!

@seantimm 4.3.2

В качестве специального исправления я добавил параметр для appendElement, позволяющий добавлять их в определенное место в документе. Есть ли шанс добавить это в будущем выпуске?

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

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

@ smileyj68 , не могли бы вы объяснить, почему желательно, чтобы страница продолжала прокручиваться, пока раскрытие открыто? Мне кажется, что когда модальное окно открыто, содержимое страницы предназначено для блокировки. Разве не предпочтительнее исправить это и установить свойство переполнения, чтобы модальная прокрутка выполнялась? Если бы это было по умолчанию, его не нужно было бы размещать в конце страницы, что является трудностью для многих ситуаций с CMS.

Кроме того, во всех моих проектах мне пришлось изменить позицию раскрытия-bg с абсолютной на фиксированную. Я не понимаю, почему это когда-либо считалось абсолютным.

Сегодня утром я столкнулся с аналогичной проблемой (с использованием Foundation-rails 5.4.5) и решил ее, добавив следующее в .reveal-modal чтобы исправить это и отцентрировать на странице:

.reveal-modal.open {
  position:fixed;
  top:50%!important; /* override inline style injected from JS */
  left:50%;
  transform:translate(-50%, -50%);
}