Как в магазине, тогда вам в помощь эта информация.
С целью максимального приближения посетителя вашей страницы к конкретному товару или услуге с первой секунды увиденного, есть маленький код на JS, который привожу ниже.
Собственно, для чего это нужно? Все мы заходим на любой сайт или сервис получить информацию как можно быстрее и в максимальном объёме.
Если у вас всего один ЛЕНДИНГ или САЙТ ВИЗИТКА очень удобно обойтись малюсенькой программкой на базе симбиоза CSS и JS.
Принцип работы кода JS основан на использовании параметра DATE присваиваемого каждому товару или услуге. Сколько товаров, столько и параметров DATE.
Перечень всего товара на понимании программы JS представляет из себя массив данных. Этот массив данных можно перебирать в режиме цикла по нажатию кнопки под каждым товаром.
JS код определит нужный товар по его параметру DATE и выведет всю нужную информацию в виде модального всплывающего окна. При нажатии значка CLOSE окно исчезает и код готов к открытию информации очередного товара.
В принципе каждое модальное окно, это блок (текст, картинка, что угодно), которое не видимо при просмотре страницы, но при нажатии кнопки под товаром блок всплывает, становясь видимым, затемняя всё остальное.
Принцип реализован на моей странице по запросу РЕШЁТКИ НА ОКНА ХАРЬКОВ для всех 70 решёток персонально.
Там в меню есть пункт Создание модальных окон на описание кода и адрес демо страницы HTML, CSS, JS для вашего скачивания и использования в своих целях.
Как скачать все три файла, надеюсь, нет проблем. Если нужно задать вопросы есть раздел комментариев или здесь на форуме.
Код JS файла.
//ПОЛУЧАЕМ МОДАЛЬНЫЕ ОКНА ДЛЯ МАНИПУЛЯЦИЙ
let modalka = document.querySelector('.modalka');
let modalka2 = document.querySelector('.modalka2');
let modalka3 = document.querySelector('.modalka3');
//ПОЛУЧАЕМ ВСЕ КНОПКИ ПОД КАЖДЫМ РИСУНКОМ
let btn = document.querySelectorAll('.btn');
//ПЕРЕБОР МАССИВА КНОПОК С ПАРАМЕТРОМ DATA
for (let i = 0; i < btn.length; i++) {
btn[i].onclick = function () {
let amout = this.getAttribute('data');// ПОЛУЧАЕМ НУЖНУЮ КНОПКУ
if (amout == '400') { // MODALKA - ОТМЕНЯЕМ ПРОЗРАЧНОСТЬ
modalka.style.display = 'block';
}
else if (amout == '500') { // MODALKA2 - ОТМЕНЯЕМ ПРОЗРАЧНОСТЬ
modalka2.style.display = 'block';
}
else if (amout == '600') { // MODALKA3 - ОТМЕНЯЕМ ПРОЗРАЧНОСТЬ
modalka3.style.display = 'block';
}
}
}
// ВОЗВРАТ К ПРОЗРАЧНОСТИ БЛОКА MODALKA
let span = document.getElementsByClassName('close')[0];
span.onclick = function () {
modalka.style.display = 'none';
}
// ВОЗВРАТ К ПРОЗРАЧНОСТИ БЛОКА MODALKA2
let span2 = document.getElementsByClassName('close2')[0];
span2.onclick = function () {
modalka2.style.display = 'none';
}
// ВОЗВРАТ К ПРОЗРАЧНОСТИ БЛОКА MODALKA3
let span3 = document.getElementsByClassName('close3')[0];
span3.onclick = function () {
modalka3.style.display = 'none';
}
Это интересно
0
|
|||
Последние откомментированные темы:
-
Пластиковые или алюминиевые окна, что лучше
(1)
Истребитель бандеровцев
,
22.02.2022
-
Завтра конец света
(1)
georgij_se
,
21.02.2022
-
Изменила мужу и потеряла семью. Как не совершать таких ошибок или как жить после этого.
(1)
georgij_se
,
03.02.2022
-
Удивительная Португалия с волшебной музыкой любви
(1)
InnoCentre
,
01.02.2022
-
Что нужно сделать чтобы муж был счастливым
(1)
georgij_se
,
01.02.2022
20240425081322