Удалить Zurb Foundation Inline Styling

Question

На самом деле я работаю над своим сайтом и пытаюсь реализовать модальный режим. Поскольку я использую Foundation, я бы хотел использовать подключаемый плагин «раскрыть», чтобы мне не пришлось его создавать ... так как я мало что знаю о JS.

Реализация была легкой, пока я не посмотрел на мобильное изображение и не заметил, что модал работает в полноэкранном режиме. Жаль, что я хотел бы избежать. После борьбы с CSS я понимаю, что Foundation добавляет встроенный стиль:

<div class="reveal" id="noChroma" style="top: 0px;">

Обратите внимание на "top: 0px", который добавляется, вероятно, из "foundation.js". Я не хочу связываться с этим файлом.

Есть ли способ, которым я могу обойти этот стиль и заставить мой, например, "top: 70vh"? Я пробовал "! Важно", но JavaScript всегда побеждает.

Вы можете увидеть это здесь

Спасибо за вашу помощь, Лучшее,

Квентин

Answer 1

См. https://foundation.zurb.com/sites/docs/reveal.html

Это делается https://github.com/zurb/foundation-sites/blob/develop/js/foundation.reveal.js#L132, который контролируется data-v-offset

Связанные проблемы и некоторые обходные пути: https://github.com/zurb/foundation-sites/pull/9763#issuecomment-332219355

https://github.com/zurb/foundation-sites/issues/10662

Answer 2

Если вы запускаете модальный режим в браузере и изменяете размер, похоже, он работает. Но если вы активируете модальное время, когда уже используете мобильный размер, JS перезаписывает! Важный. - Квентин Бо Квинт

Я не могу воспроизвести это поведение. (Скриншот)

Здесь победит !important css. Даже если я перезагружаю сайт и запускаю снова.