I have a website with a catalog. What I want to do, is a modal window, that opens when I click on product card and has other information and photos about product.I have already made special id's for all products, but I can't make a script. Is there easy solution for this ?
Also my full code on Codepen
$(".clothes_js").click(function() {
$(".cl-item").hide();
$(".clothes").show("fast");
$(".boots").show("fast");
});
$(".hzt_js").click(function() {
$(".cl-item").hide();
$(".cl-item.ph").show("fast");
$(".cl-item.sl").show("fast");
$(".cl-item.tr").show("fast");
});
$(".pled_js").click(function() {
$(".cl-item").hide();
$(".cl-item.pled").show("fast");
});
function catalog() {
document.getElementById("cg").style.display = "grid";
document.getElementById("cl").style.display = "grid";
document.getElementById("back-btn").style.visibility = "visible";
};
$(".back-btn").click(function() {
$('html,body').animate({
scrollTop: $(".cg-dummy").offset().top},
'slow');
});
// FLickity Start
$('.slideshow').flickity({
// options
cellAlign: 'center',
contain: true,
wrapAround: true,
autoPlay: 5000,
prevNextButtons: false,
cellSelector: '.ss-item'
});
/*----------------------------------------*\
#ESSENTIALS
\*----------------------------------------*/
:root {
--dark-blue: #34495e;
--green: #27ae60;
--shadow: 0 0 30px 1px rgba(104, 104, 104, 0.8);
--b_green: 3px solid var(--green);
--orange: #e67e22;
--gradient : linear-gradient(to bottom right, #00e5ff, #2ecc71);
--gradient_shadow: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3))
}
/*------------------
!COLORS
------------------*/
.blue { background-color: #1078A4; }
.biruza { background-color: #00939A; }
.siren { background-color: #C13C8D; }
.malina { background-color: #E76F77; }
.corall { background-color: #E44440; }
.an-dark-blue { background-color: #24204A; }
.olive { background-color: #635836; }
.baklajan { background-color: #503944; }
.grey { background-color: grey; }
.cream {
background-color: #E9C4AA;
color: var(--dark-blue);
}
.gradient {
background: var(--gradient);
color: var(--dark-blue);
}
.white {
background-color: white;
color: var(--dark-blue);
}
.yellow {
background-color: #FFCE65;
color: var(--dark-blue);
}
/*------------------
!ANIMATIONS
------------------*/
@-webkit-keyframes pulse {
0% {
border: 3px solid rgba(39, 174, 96, 1)
}
50% {
border: 3px solid rgba(39, 174, 96, 0);
}
100% {
border: 3px solid rgba(39, 174, 96, 1);
}
}
@-o-keyframes pulse {
0% {
border: 3px solid rgba(39, 174, 96, 1)
}
50% {
border: 3px solid rgba(39, 174, 96, 0);
}
100% {
border: 3px solid rgba(39, 174, 96, 1);
}
}
@-moz-keyframes pulse {
0% {
border: 3px solid rgba(39, 174, 96, 1)
}
50% {
border: 3px solid rgba(39, 174, 96, 0);
}
100% {
border: 3px solid rgba(39, 174, 96, 1);
}
}
@keyframes pulse {
0% {
border: 3px solid rgba(39, 174, 96, 1)
}
50% {
border: 3px solid rgba(39, 174, 96, 0);
}
100% {
border: 3px solid rgba(39, 174, 96, 1);
}
}
/*------------------
!MAIN
------------------*/
body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
/*font-family: 'Pacifico', cursive;*/
text-align: center;
}
html, body {
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
}
img {
max-width:100%;
max-height:100%;
}
.dummy {
visibility: hidden;
}
/*----------------------------------------*\
#ESSENTIALS
\*----------------------------------------*/
.navbar {
position : relative;
top : 0;
display : grid;
grid-template-columns: 1fr 1fr 1fr;
justify-items : center;
align-items : center;
width : 100%;
padding : 10px;
background-color : var(--dark-blue);
}
.home-btn a img {
margin : 0;
border : 3px solid white;
min-width : 180px;
min-height: 80px;
}
tr > td {
padding : 3px 0;
text-align : left;
color : var(--green);
font-weight: bold;
}
td img {
float : right;
margin-right: 5px;
width : 20px;
height : 20px;
}
/*------------------
!SLIDESHOW
------------------*/
.slideshow {
background: var(--dark-blue);
position : relative;
}
.ss-item {
width : 100%;
height : 80vh;
margin-right: 0;
background : var(--green);
font-size : 1.25em;
}
.ss-item:nth-child(1) {
background : url(../img/ss1.jpg) no-repeat;
background-size : cover;
background-position: center center;
}
.ss-item:nth-child(2) {
background : url(../img/ss2.jpg) no-repeat;
background-size : cover;
background-position: center center;
}
.ss-item:nth-child(3) {
background : url(../img/ss3.jpg) no-repeat;
background-size : cover;
background-position: center center;
}
.ss-item:nth-child(4) {
background : url(../img/ss4.jpg) no-repeat;
background-size : cover;
background-position: center center;
}
.ss-item:nth-child(5) {
background : url(../img/ss5.jpg) no-repeat;
background-size : cover;
background-position: center center;
}
.ss-item__text {
position: absolute;
left : 50px;
bottom : 50px;
width : 90%;
}
.ss-item__h1 {
margin : 0;
padding: 10px;
float : left;
display: inline-block;
color : white/*var(--green)*/;
/*background: var(--dark-blue);*/
}
.ss-item__p {
margin : 0;
padding : 10px;
width : 80%;
float : left;
clear : left;
display : inline-block;
color : white/*var(--green)*/;
text-align : left;
/*background: var(--dark-blue);*/
}
.slideshow .flickity-page-dots {
bottom : 0.5em;
opacity: 1;
}
.slideshow .flickity-page-dots .dot {
width : 10px;
height : 10px;
background: #ccc;
border : 2px solid transparent;
}
.slideshow .flickity-page-dots .dot.is-selected {
background: #76ff03;
}
/*------------------
!INFO
------------------*/
.info {
display :grid;
grid-template-rows: 1fr 1fr;
margin : 20px;
box-shadow : var(--shadow);
}
.info__text {
background : var(--dark-blue);
color : var(--green);
text-align : center;
font-size : 1.2em;
border-top : 3px solid var(--green);
margin : 0;
padding : 20px;
/*box-shadow: var(--shadow);*/
}
.info__map iframe {
height: 100%;
width : 100%;
}
/*----------------------------------------*\
#CATALOG STUFF
\*----------------------------------------*/
/*------------------
!DUMMY
------------------*/
.cg-dummy {
position : relative;
width : 100%;
height : 500px;
background : url(../img/catalog.jpg);
background-size : cover;
background-position: center center;
background-color : #000;
box-shadow : var(--shadow);
box-sizing : border-box;
display : -webkit-flex;
display : -moz-flex;
display : -ms-flex;
display : -o-flex;
display : flex;
justify-content : center;
align-items : center;
margin : 30px auto;
cursor : pointer;
transition : opacity .7s ease-in-out;
}
.cg-dummy:hover {
opacity: 0.8;
}
.cg-dummy h1 {
font-weight: bold;
color : var(--green);
padding : 10px;
border : 3px solid var(--green);
transition : opacity 1s ease-in-out;
}
.cg-dummy:hover h1 { opacity: .7; }
/*------------------
!CATEGORIES
------------------*/
.cg {
display: none;
grid-gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(382px, 1fr));
grid-template-rows: 1fr;
margin: 0 20px;
}
.cg-h1 {
display : none;
text-align : center;
font-size : 2.5em;
color : var(--green);
margin : 20px auto;
cursor : pointer;
padding : 5px;
border-radius: 5px;
}
.cg-item {
background: var(--dark-blue);
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
min-height: 100px;
border: none;
outline: none;
border-bottom: 3px solid var(--green);
box-shadow: 0 0 5px 1px rgba(104, 104, 104, 0.8)/*var(--shadow)*/;
}
.cg-item:focus {
border-right: var(--b_green);
border-left: var(--b_green);
border-top: var(--b_green);
}
.cg-item h1 {
position: relative;
font-size: 2.3em;
color: var(--green);
}
.cg-item:nth-child(1) h1::before {
content: "";
position: absolute;
margin: 0 auto;
left: -70px;
top: 50%;
transform: translateY(-50%);
background: url(../svg/fashion.svg);
-webkit-background-size: 50px 50px;
background-size: 50px 50px;
width: 50px;
height: 50px;
}
.cg-item:nth-child(2) h1::before {
content: "";
position: absolute;
margin: 0 auto;
left: -70px;
top: 50%;
transform: translateY(-50%);
background: url(../svg/dish.svg);
-webkit-background-size: 50px 50px;
background-size: 50px 50px;
width: 50px;
height: 50px;
}
.cg-item:nth-child(3) h1::before {
content: "";
position: absolute;
margin: 0 auto;
left: -70px;
top: 50%;
transform: translateY(-50%);
background: url(../svg/armchair.svg);
-webkit-background-size: 50px 50px;
background-size: 50px 50px;
width: 50px;
height: 50px;
}
.back-btn {
position: fixed;
bottom: 5%;
right: 5%;
width: 50px;
height: 50px;
border-radius: 50px;
border: 2px solid var(--green);
background: var(--dark-blue);
z-index: 160;
cursor: pointer;
color: var(--orange);
visibility: hidden;
}
/*------------------
!CATALOG
------------------*/
.cl {
display: none;
grid-template-columns: repeat(auto-fit, 340px);
grid-template-rows: 1fr;
grid-gap: 20px;
justify-items: center;
align-items: center;
justify-content: space-evenly;
align-content: center;
margin: 20px 0;
}
.cl::after {
content: "";
display: table;
clear: both;
}
.cl-item {
display: grid;
grid-template-rows: repeat(4, 70px) 70px 15px;
grid-template-columns: 320px;
box-shadow: var(--shadow);
width: 320px;
height: 364px;
/*float: left;*/
}
.cl-item::after {
content: "";
display: table;
clear: both;
}
.cl-item img {
grid-row: 1/5;
display: block;
height: 100%;
width: 100%;
object-fit: fill;
}
.cl-item__info {
grid-row: 6/7;
display: grid;
grid-template-columns: 1fr 1fr;
}
.cl-item__color {
display: block;
height: 100%;
width: 100%;
text-align: center;
color: white /*var(--orange)*/;
font-size: 12px;
font-style: italic;
}
.cl-item__size {
display: block;
height: 100%;
width: 100%;
background-color: var(--dark-blue);
text-align: center;
color: var(--orange);
font-size: 12px;
font-style: italic;
}
.cl-item p {
/*display: inline;*/
grid-row: 5/6;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background-color: var(--dark-blue);
border-top: 4px solid var(--green);
box-sizing: border-box;
font-size: 19.2px;
color: var(--green);
height: 100%;
margin: 0;
}
.clothes img, .boots img {
/*width: 70%;*/
object-fit: contain;
}
/*----------------------------------------*\
#ESSENTIALS
\*----------------------------------------*/
/*------------------
!MEDIA
------------------*/
@media (min-width: 1280px) {
.info {
display:grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr;
}
.info__text {
border-top: none;
border-left: 3px solid var(--green);
}
}
@media (max-width: 990px) {
body {
font-size: 12px;
}
.ss-item__text {
position: absolute;
bottom : 30px;
left : 30px;
width : 90%;
font-size: .8em;
}
.info {
display :grid;
grid-template-rows: 300px 1fr;
margin : 20px;
box-shadow : var(--shadow);
}
.cg {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
margin: 0;
}
.cg-item h1 {
font-size: 1.4em;
}
.cg-item:nth-child(3) h1::before {
content: "";
position: absolute;
margin: 0 auto;
left: -60px;
top: 50%;
transform: translateY(-50%);
background: url(../svg/armchair.svg);
-webkit-background-size: 50px 50px;
background-size: 50px 50px;
width: 50px;
height: 50px;
}
}
@media (max-width: 500px) {
.navbar {
grid-template-columns: 1fr;
grid-template-rows: repeat(2, 1fr);
}
.dummy {
display: none;
}
}
@media (max-width: 361px) {
.navbar-number {
margin: 20px auto;
}
.cg-dummy {
height: 200px;
}
.ss-item__text {
position: absolute;
bottom : 30px;
left : 20px;
width : 90%;
font-size: .7em;
}
.cg-item {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
font-size: 1.2em;
}
.cg-item img {
width: 30px;
height: 30px;
}
.cl-item {
margin: 20px auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>TextileToday</title>
<link rel="stylesheet" href="css/style.css?v=9">
<link rel="stylesheet" href="css/flickity.css">
<link href="https://fonts.googleapis.com/css?family=Pacifico|Roboto" rel="stylesheet">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/flickity.pkgd.min.js"></script>
<script src="js/myScript.js?v=9"></script>
</head>
<body>
<nav class="navbar">
<div class="info-tb dummy">
<table>
<tr>
<td><img src="https://picsum.photos/20/20" alt=""></td>
<td>84955100075</td>
</tr>
<tr>
<td><img src="https://picsum.photos/20/20" alt=""></td>
<td>@Textile2day</td>
</tr>
<tr>
<td><img src="https://picsum.photos/20/20" alt=""></td>
<td>info.torgservice@bk.ru</td>
</tr>
</table>
</div>
<div class="home-btn">
<a href="#home"><img src="img/logo.png" alt=""></a>
</div>
<div class="info-tb__header">
<table>
<tr>
<td><img src="svg/telephone.svg" alt=""></td>
<td>84955100075</td>
</tr>
<tr>
<td><img src="svg/instagram.svg" alt=""></td>
<td>@Textile2day</td>
</tr>
<tr>
<td><img src="svg/email.svg" alt=""></td>
<td>info.torgservice@bk.ru</td>
</tr>
</table>
</div>
</nav>
<section class="slideshow">
<div class="ss-item">
<div class="ss-item__text">
<h1 class="ss-item__h1">Новое поколение</h1>
<p class="ss-item__p">Велсофт — это синтетика нового поколения. Ткань называют также микрофиброй. Страна рождения – Япония. Именно здесь, на островах высоких технологий, в 1976 году был разработан способ изготовления уникальных, ультратонких волокон, диаметр которых не превышает 0,06 мм</p>
</div>
</div>
<div class="ss-item">
<div class="ss-item__text">
<h1 class="ss-item__h1">Комфорт</h1>
<p class="ss-item__p">Велсофт создан для домашнего комфорта и уюта. Её пушистый, мягкий ворс напоминает велюр, но отличается особой шелковистостью и нежностью. Изделия из этого материала дарят и взрослым, и детям ощущения особого домашнего тепла и покоя</p>
</div>
</div>
<div class="ss-item">
<div class="ss-item__text">
<h1 class="ss-item__h1">Дышащая ткань</h1>
<p class="ss-item__p">Наличие достаточно длинного и воздушного ворса, необыкновенно тёплого и приятного на ощупь, приводит к тому, что изделие почти мгновенно достигает температуры человеческого тела, в последующем сохраняя полученное тепло. Одежда из велсофта препятствует перегреву даже в очень тёплом помещении</p>
</div>
</div>
<div class="ss-item">
<div class="ss-item__text">
<h1 class="ss-item__h1">Безопасность</h1>
<p class="ss-item__p">Велсофт производят в полном соответствии с нормами международной системы сертификации и тестирования изделий из текстиля Эко Текс, что делает его пригодным для производства домашней и детской одежды</p>
</div>
</div>
<div class="ss-item">
<div class="ss-item__text">
<h1 class="ss-item__h1">Гипоалергенность</h1>
<p class="ss-item__p">Микрофибра — гипоаллергенная ткань, состоящая из полимерных и натуральных волокон, в том числе нейлона, полиэстера, хлопка или вискозы. Ткань широко применяется при производстве одежды, мебели, в промышленности. В ее основе — ультратонкие волокна, в 10 раз меньше диаметра волокна натурального шелка</p>
</div>
</div>
</section>
<div class="cg-dummy" id="cg-dummy" onclick="catalog()">
<h1 id="dummy__h1">Каталог</h1>
</div>
<div class="cg" id="cg">
<button class="cg-item сlothes_js">
<h1>Одежда</h1>
</button>
<button class="cg-item hzt_js">
<h1>Хозтовары</h1>
</button>
<button class="cg-item pled_js">
<h1>Товары для дома</h1>
</button>
</div>
<div class="back-btn" id="back-btn"><img src="svg/upload.svg" alt=""></div>
<div class="cl" id="cl">
<!--------------------------
ТОВАРЫ ДЛЯ ДОМА
-------------------------->
<!------------
DPLED
------------->
<div class="cl-item pled" id="A000">
<img src="img/dpled/dpled1.jpg" alt="">
<div class="cl-item__info">
<div class="cl-item__color cream">Кремовый</div>
<div class="cl-item__size">150x200cm, 200x220cm</div>
</div>
<p>Плед из велсофта</p>
</div>
<div class="cl-item pled" id="A001">
<img src="img/dpled/dpled2.jpg" alt="">
<div class="cl-item__info">
<div class="cl-item__color blue">Голубой</div>
<div class="cl-item__size">150x200cm, 200x220cm</div>
</div>
<p>Плед из велсофта</p>
</div>
<div class="cl-item pled" id="A002">
<img src="img/dpled/dpled3.jpg" alt="">
<div class="cl-item__info">
<div class="cl-item__color biruza">Бирюза</div>
<div class="cl-item__size">150x200cm, 200x220cm</div>
</div>
<p>Плед из велсофта</p>
</div>
<div class="cl-item pled" id="A003">
<img src="img/dpled/dpled4.jpg" alt="">
<div class="cl-item__info">
<div class="cl-item__color siren">Сирень</div>
<div class="cl-item__size">150x200cm, 200x220cm</div>
</div>
<p>Плед из велсофта</p>
</div>
<div class="cl-item pled" id="A004">
<img src="img/dpled/dpled5.jpg" alt="">
<div class="cl-item__info">
<div class="cl-item__color malina">Малина</div>
<div class="cl-item__size">150x200cm, 200x220cm</div>
</div>
<p>Плед из велсофта</p>
</div>
<div class="cl-item pled" id="A005">
<img src="img/dpled/dpled6.jpg" alt="">
<div class="cl-item__info">
<div class="cl-item__color corall">Коралл</div>
<div class="cl-item__size">150x200cm, 200x220cm</div>
</div>
<p>Плед из велсофта</p>
</div>
<div class="cl-item pled" id="A006">
<img src="img/dpled/dpled7.jpg" alt="">
<div class="cl-item__info">
<div class="cl-item__color malina">Малина</div>
<div class="cl-item__size">150x200cm, 200x220cm</div>
</div>
<p>Плед из велсофта</p>
</div>
<div class="cl-item pled" id="A007">
<img src="img/dpled/dpled8.jpg" alt="">
<div class="cl-item__info">
<div class="cl-item__color corall">Коралл</div>
<div class="cl-item__size">150x200cm, 200x220cm</div>
</div>
<p>Плед из велсофта</p>
</div>
<div class="cl-item pled" id="A008">
<img src="img/dpled/dpled9.jpg" alt="">
<div class="cl-item__info">
<div class="cl-item__color biruza">Бирюза</div>
<div class="cl-item__size">150x200cm, 200x220cm</div>
</div>
<p>Плед из велсофта</p>
</div>
<div class="cl-item pled" id="A009">
<img src="img/dpled/dpled10.jpg" alt="">
<div class="cl-item__info">
<div class="cl-item__color siren">Сирень</div>
<div class="cl-item__size">150x200cm, 200x220cm</div>
</div>
<p>Плед из велсофта</p>
</div>
<div class="cl-item pled" id="A010">
<img src="img/dpled/dpled11.jpg" alt="">
<div class="cl-item__info">
<div class="cl-item__color cream">Кремовый</div>
<div class="cl-item__size">150x200cm, 200x220cm</div>
</div>
<p>Плед из велсофта</p>
</div>
<div class="cl-item pled" id="A011">
<img src="img/dpled/dpled12.jpg" alt="">
<div class="cl-item__info">
<div class="cl-item__color blue">Голубой</div>
<div class="cl-item__size">150x200cm, 200x220cm</div>
</div>
<p>Плед из велсофта</p>
</div>
<div class="cl-item pled" id="A012">
<img src="img/dpled/dpled13.jpg" alt="">
<div class="cl-item__info">
<div class="cl-item__color corall">Коралл</div>
<div class="cl-item__size">150x200cm, 200x220cm</div>
</div>
<p>Плед из велсофта</p>
</div>
<div class="cl-item pled" id="A013">
<img src="img/dpled/dpled14.jpg" alt="">
<div class="cl-item__info">
<div class="cl-item__color malina">Малина</div>
<div class="cl-item__size">150x200cm, 200x220cm</div>
</div>
<p>Плед из велсофта</p>
</div>
<div class="cl-item pled" id="A014">
<img src="img/dpled/dpled15.jpg" alt="">
<div class="cl-item__info">
<div class="cl-item__color blue">Голубой</div>
<div class="cl-item__size">150x200cm, 200x220cm</div>
</div>
<p>Плед из велсофта</p>
</div>
<div class="cl-item pled" id="A015">
<img src="img/dpled/dpled16.jpg" alt="">
<div class="cl-item__info">
<div class="cl-item__color siren">Сирень</div>
<div class="cl-item__size">150x200cm, 200x220cm</div>
</div>
<p>Плед из велсофта</p>
</div>
<div class="cl-item pled" id="A016">
<img src="img/dpled/dpled17.jpg" alt="">
<div class="cl-item__info">
<div class="cl-item__color biruza">Бирюза</div>
<div class="cl-item__size">150x200cm, 200x220cm</div>
</div>
<p>Плед из велсофта</p>
</div>
<div class="cl-item pled" id="A017">
<img src="img/dpled/dpled18.jpg" alt="">
<div class="cl-item__info">
<div class="cl-item__color cream">Кремовый</div>
<div class="cl-item__size">150x200cm, 200x220cm</div>
</div>
<p>Плед из велсофта</p>
</div>
<!------------
OPLED
------------->
<div class="cl-item pled" id="A018">
<img src="img/opled/opled1.jpg" alt="">
<div class="cl-item__info">
<div class="cl-item__color an-dark-blue">Темно-Голубой</div>
<div class="cl-item__size">150x200cm, 200x220cm</div>
</div>
<p>Плед из велсофта</p>
</div>
<div class="cl-item pled" id="A019">
<img src="img/opled/opled2.jpg" alt="">
<div class="cl-item__info">
<div class="cl-item__color olive">Оливковый</div>
<div class="cl-item__size">150x200cm, 200x220cm</div>
</div>
<p>Плед из велсофта</p>
</div>
<div class="cl-item pled" id="A020">
<img src="img/opled/opled3.jpg" alt="">
<div class="cl-item__info">
<div class="cl-item__color baklajan">Баклажан</div>
<div class="cl-item__size">150x200cm, 200x220cm</div>
</div>
<p>Плед из велсофта</p>
</div>
<div class="cl-item pled" id="A021">
<img src="img/opled/opled4.jpg" alt="">
<div class="cl-item__info">
<div class="cl-item__color baklajan">Баклажан</div>
<div class="cl-item__size">150x200cm, 200x220cm</div>
</div>
<p>Плед из велсофта</p>
</div>
<script src="js/myScript.js"></script>
<script src="js/flickity.pkgd.min.js"></script>
</body>
</html>
<!-- (.cl-item>im id="0000"g.ph$+p{Lorem ipsum dolor.})*4 -->
Aucun commentaire:
Enregistrer un commentaire