javascript — проблемы при комбинировании css: target selector с параметрами url-хеша для показа модальных

Проблемы при комбинировании css: target selector с параметрами url-хеша для отображения модальных

Мои знания JavaScript и CSS довольно ограничены. Я думаю, что мне не хватает некоторых тонкостей того, когда и как применяется CSS, а также того, как работает загрузка страниц в сочетании с асинхронным JavaScript-вызовами.

Это работает: у меня есть модал только css, который отображается, когда идентификатор моего модального ( view ) совпадает с хешем в url ( #view ). Я использую его для отображения изображений (это один и тот же модальный div для всех изображений, и фактический src изображения обновляется через прослушиватели событий, добавленные к ссылкам на привязку модалов). Это работает нормально.

Это работает: я хотел расширить это, чтобы я мог напрямую ссылаться на уже открытое всплывающее окно, предоставляя URL-адрес в качестве хеш-параметра. Т.е. example.com/#view=imageUrl . Простое открытие этого не сделает соответствие css selector :target , поскольку теперь оно содержит представление, но если я разделю это, проверяя var hash = window.location.hash.substr(1); Я могу отделить URL от якоря, и если я тогда использую:

 window.history.pushState("", "", window.location.href.split('=')[0]); updateModal(imageUrl) 

где updateModal устанавливает источник изображения для разделенного URL. Все тоже хорошо, то есть сайт открывается с открытым модалом и изображением с URL-адреса.

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

 dummyImage.onload = function () { window.history.pushState("", "", window.location.href.split('=')[0]) updateModal(imageUrl) } 

Если я так делаю, модал не показывает. CSS не применяется, почему это?

Я также попытался изменить видимость модальности самостоятельно:

 dummyImage.onload = function () { window.history.pushState("", "", window.location.href.split('=')[0]) updateModal(imageUrl) var myModal = document.getElementById('view') myModal.style.display = 'flex' myModal.style.visibility = 'visible' } 

Это делает модальный вид, но, кажется, добавляет стиль, который больше не может быть переопределен CSS. В частности, когда я #noname ссылку закрытия модального #noname которая просто переходит на другой якорь # #noname имя которого изменяется, селектор css :target больше не должен совпадать, но модальное больше не закрывается. Почему бы CSS больше не применяется?

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector