Есть ли способ сделать кнопки позади div кликабельными, не отключая кнопки в div?

У меня есть веб-страница, которая использует iFrame для загрузки динамического заголовка (короче говоря, у нас есть большой сайт, который включает страницу Shopify; каждая другая страница на сайте использует виджет Ektron для загрузки заголовка, но я не могу сделать это в коде Shopify, поэтому вместо этого я использую iFrame для загрузки заголовка с отдельной страницы). В заголовке есть кнопки, которые должны работать, а также модальное окно, которое открывается при нажатии кнопки входа. Модальное окно - проблема. Мой iFrame в настоящее время имеет размер самого заголовка (330px); если окно iFrame больше этого, оно закрывает содержимое на странице и делает эти кнопки неактивными. Я не могу добавить "pointer-events:none" в iFrame, потому что мне нужны кнопки в заголовке iFrame для работы. Однако, когда открывается модальный вход в систему, он отключается, потому что iFrame недостаточно велик, чтобы отобразить все это. Я также не могу установить высоту iFrame, скажем, 1000px, и использовать z-index, чтобы поместить его позади другого контента, потому что, когда я это делаю, контент на странице Shopify отображается в верхней части модального окна.

Последнее, что я попробовал, - это динамическое изменение высоты iFrame, чтобы при нажатии кнопки входа в систему высота iFrame увеличивалась, чтобы показать весь модал. Однако, поскольку содержимое iFrame имеет домен, отличный от страницы Shopify, я не могу назначить iFrame в качестве родительского для документа заголовка.

Что я действительно хочу сделать, так это сделать высоту iFrame достаточно большой, чтобы отобразить модальное окно, а также сделать кнопки позади iFrame активными, не отключая кнопки в iFrame. Есть ли какой-нибудь способ, которым я могу включить кнопки как в И за div?

1 ответ

Это будет очень плохой UX, и вы действительно должны подумать о чем-то другом. Но в любом случае, по крайней мере, в новых браузерах, вы можете поставить pointer-events: none стиль на iframe, который не позволит ему захватить любой клик. Затем вы положили pointer-events: auto на кнопках внутри модального окна внутри фрейма, чтобы по крайней мере они правильно регистрировали щелчок. Таким образом, вы получите клик.

Конечно, события указателя поддерживаются всеми современными браузерами (но не IE10 и ниже).

Другие вопросы по тегам