У меня есть фотография, использующая гиперссылку, и там есть функция onclick. Когда я нажимаю на текст, он выводит div.
Теперь я хочу напрямую показать фотографию во всплывающем элементе div, а не переходить на другой веб-сайт, чтобы увидеть фотографию, что мне делать? Нужно ли мне изменить настройку CSS всплывающего элемента div «myModal»?
вот мой HTML-код
<div class = "navbar">
<a
onclick = "myFunction()"
href = "https://live.staticflickr.com/65535/52677035304_b82948dc84_h.jpg"
>Photo1</a
>
</div>
js-код
function myFunction() {
var x = document.getElementById("myModal");
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
модальное в HTML
<div style = "text-align: center" id = "myModal" class = "modal">
<!--Modal content-->
<div class = "modal-content">
<span onclick = "myFunction()" id = "cross" class = "close">×</span>
<p>some text</p>
</div>
</div>
Что я хочу:
Я могу отобразить модальное окно, но теперь я также добавил гиперссылку, которая является фотографией, в мой кликабельный текст. Я хочу показать фотографию с гиперссылкой в модальном режиме.
Не видя, как построено модальное окно, было бы очень сложно ответить правильно.
Что должно произойти с "каким-то текстом"? Должен ли он быть заменен? Что еще использует этот модал? Будут ли другие варианты использования ожидать наличия текста вместо изображения?
myFunction
, чтобы preventDefault()
можно было вызвать, чтобы предотвратить переход с текущей страницы. Однако обратите внимание, что рекомендуется использовать addEventListener
вместо встроенных обработчиков событий.<img>
внутри модального окна и измените его src
при отображении изображения.<div class = "navbar">
<a onclick = "myFunction(event)" href = "https://live.staticflickr.com/65535/52677035304_b82948dc84_h.jpg">Photo1</a>
</div>
<div style = "text-align: center; display: none;" id = "myModal" class = "modal">
<div class = "modal-content">
<span onclick = "myFunction()" id = "cross" class = "close">×</span>
<img/>
</div>
</div>
<script>
function myFunction(e) {
e.preventDefault();
const x = document.getElementById("myModal");
x.querySelector('img').src = e.target.href;
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
Вам следует избегать встроенных обработчиков событий по нескольким причинам. В этом случае мы полагаемся на window.event (сокращенно event
), который даже устарел.
@OskarGrosser Я упомянул, что в ответе предпочтительнее addEventListener
. Также нет, это не window.event
. Контекст, в котором вызываются встроенные обработчики событий, имеет объект event
.
Несмотря на то, что вы упомянули addEventListener
, большинство людей будут смотреть только на код. Показ правильного примера поможет другим.
@OskarGrosser Нет, привязка события является частью спецификации и не зависит от window.event
(который не нужно определять, чтобы это работало). Смотрите здесь: stackoverflow.com/a/17430631/9513184
@Unmitigated Цитаты в этом ответе кажутся немного устаревшими, но вы были совершенно правы. event
является параметром анонимной функции и, следовательно, не является свойством window.event
.
Вы спрашиваете, как отображать модальное окно? Это довольно широкий вопрос