Как напрямую показать фотографию гиперссылки в div?

У меня есть фотография, использующая гиперссылку, и там есть функция 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">&times;</span>
        <p>some text</p>
      </div>
    </div>

Что я хочу:

Вы спрашиваете, как отображать модальное окно? Это довольно широкий вопрос

Phil 08.02.2023 22:49

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

kenny 08.02.2023 22:53

Не видя, как построено модальное окно, было бы очень сложно ответить правильно.

Phil 08.02.2023 22:53

Что должно произойти с "каким-то текстом"? Должен ли он быть заменен? Что еще использует этот модал? Будут ли другие варианты использования ожидать наличия текста вместо изображения?

Phil 08.02.2023 23:15
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
85
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
  • Передайте объект события в 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">&times;</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), который даже устарел.

Oskar Grosser 09.02.2023 04:11

@OskarGrosser Я упомянул, что в ответе предпочтительнее addEventListener. Также нет, это не window.event. Контекст, в котором вызываются встроенные обработчики событий, имеет объект event.

Unmitigated 09.02.2023 05:53

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

Emiel Zuurbier 09.02.2023 09:53

@OskarGrosser Нет, привязка события является частью спецификации и не зависит от window.event (который не нужно определять, чтобы это работало). Смотрите здесь: stackoverflow.com/a/17430631/9513184

Unmitigated 09.02.2023 19:28

@Unmitigated Цитаты в этом ответе кажутся немного устаревшими, но вы были совершенно правы. event является параметром анонимной функции и, следовательно, не является свойством window.event.

Oskar Grosser 09.02.2023 20:11

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