0

У меня есть сайт-каталог. Мне интересно, как сделать, чтобы при клике на товар всплывало окно с расширенной информацией о нём? И насколько это будет нагружено для сайта?

1
  • почитайте про fancybox
    – ThisMan
    24 июл 2018 в 17:27

1 ответ 1

2

Нагрузка на сервер зависит от того, что вы хотите показать в этом всплывающем окне. В большинстве случаев контент простой и его можно подгрузить вместе со всей страницей, но, если очень много разных данных, лучше при самом клике.

Само модальное окно делается очень легко: просто создаётся слой поверх всего остального содержимого страницы с кучей CSS, как для расположения (вроде position:fixed;), так и для красоты (вроде затемнения основного контента, загружённых углов).

Вот хороший пример из Bootstrap, можно вырезать стили и использовать без него. Или, как подсказал @ThisMan, можно использовать библиотеки вроде FancyBox.


Ваш план действий таков:

  • Создаёте JavaScript функцию, которая принимает какой-нибудь ID товара и показывает модальное окно. Для появления/исчезновения этого окна нужно менять стили слоя. Конечно, содержимое окна тоже нужно обновлять, либо заранее загруженными данными, либо делать для этого HTTP запрос.

  • При заполнении HTML страницы товарами всем им в событие onclick ставите вышеупомянутую функцию с идентификатором текущего товара.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.