У меня есть сайт-каталог. Мне интересно, как сделать, чтобы при клике на товар всплывало окно с расширенной информацией о нём? И насколько это будет нагружено для сайта?
1 ответ
Нагрузка на сервер зависит от того, что вы хотите показать в этом всплывающем окне. В большинстве случаев контент простой и его можно подгрузить вместе со всей страницей, но, если очень много разных данных, лучше при самом клике.
Само модальное окно делается очень легко: просто создаётся слой поверх всего остального содержимого страницы с кучей CSS, как для расположения (вроде position:fixed;
), так и для красоты (вроде затемнения основного контента, загружённых углов).
Вот хороший пример из Bootstrap, можно вырезать стили и использовать без него. Или, как подсказал @ThisMan, можно использовать библиотеки вроде FancyBox.
Ваш план действий таков:
Создаёте JavaScript функцию, которая принимает какой-нибудь ID товара и показывает модальное окно. Для появления/исчезновения этого окна нужно менять стили слоя. Конечно, содержимое окна тоже нужно обновлять, либо заранее загруженными данными, либо делать для этого HTTP запрос.
При заполнении HTML страницы товарами всем им в событие
onclick
ставите вышеупомянутую функцию с идентификатором текущего товара.
fancybox