added popup review, question, and share
This commit is contained in:
JSriwongsa
parent
78c8e4f3c5
commit
4f79580501
2 changed files with 188 additions and 5 deletions
|
|
@ -934,8 +934,115 @@ form :where(input, textarea, select)::placeholder{
|
||||||
.inner-footer .list-block .company-address:hover p{
|
.inner-footer .list-block .company-address:hover p{
|
||||||
color: var(--dark-color);
|
color: var(--dark-color);
|
||||||
}
|
}
|
||||||
|
/*--------- popup --------*/
|
||||||
|
.data-popup{
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.data-popup .wrap{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.data-popup .data-content{
|
||||||
|
position: relative;
|
||||||
|
background-color: var(--white-color);
|
||||||
|
width: var(--data-width, 400px);
|
||||||
|
padding: 40px 20px;
|
||||||
|
max-width: calc(100vw -50px);
|
||||||
|
max-height: calc(100vh -60px);
|
||||||
|
border-radius: 5px;
|
||||||
|
overflow-y: auto;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
.data-popup .close-trigger, .data-popup .form span{
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 40px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.data-popup .form{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.data-popup label{
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.data-popup .form input{
|
||||||
|
background-color: lightgrey;
|
||||||
|
color: var(--dark-color);
|
||||||
|
padding: 5px 30px 5px 10px;
|
||||||
|
border: none;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.data-popup .form span{
|
||||||
|
top: auto;
|
||||||
|
bottom: 0;
|
||||||
|
right: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.data-popup .form span:hover{
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
.data-popup .media-share{
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.data-popup form>div{
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.data-popup form input, textarea{
|
||||||
|
border-color: var(--main-color);
|
||||||
|
}
|
||||||
|
form .button button{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
form .button .secondary-btn{
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.data-popup h3, form .button{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.data_review .data-content{
|
||||||
|
--data-width: 500px;
|
||||||
|
}
|
||||||
|
.data_review .dotgrid .wrapper{
|
||||||
|
--gutter: 10px;
|
||||||
|
}
|
||||||
|
.data_review .stars input{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.data_review .stars > input:checked ~ label{
|
||||||
|
color: var(--based-color);
|
||||||
|
}
|
||||||
|
.data_review .stars label{
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.data_review :where(.rating, .stars){
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
.data_review .stars{
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
.data-popup{
|
||||||
|
display: none;
|
||||||
|
animation: var(--fade);
|
||||||
|
}
|
||||||
|
.data-popup.active{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -307,8 +307,8 @@
|
||||||
<div class="product-control list-inline">
|
<div class="product-control list-inline">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=""><i class='bx bx-heart' ></i><span>Add to List</span></a></li>
|
<li><a href=""><i class='bx bx-heart' ></i><span>Add to List</span></a></li>
|
||||||
<li><a href=""><i class='bx bx-share' ></i><span>Share</span></a></li>
|
<li><a href="#0" trigger-button data-target="data-share"><i class='bx bx-share' ></i><span>Share</span></a></li>
|
||||||
<li><a href=""><i class='bx bx-help-circle' ></i><span>Help</span></a></li>
|
<li><a href="#0" trigger-button data-target="data-question"><i class='bx bx-help-circle' ></i><span>Help</span></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="shipping">
|
<div class="shipping">
|
||||||
|
|
@ -375,7 +375,7 @@
|
||||||
<span>2 reviews</span>
|
<span>2 reviews</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="button">
|
<div class="button">
|
||||||
<a href="" class="primary-btn">Write a Review</a>
|
<a href="#0" class="primary-btn" trigger-button data-target="data-review">Write a Review</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="body-review">
|
<div class="body-review">
|
||||||
|
|
@ -675,6 +675,82 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="data-share" class="data-popup data_share">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="data-content">
|
||||||
|
<a href="#0" class="close-trigger" close-button><i class='bx bx-x'></i></a>
|
||||||
|
<div class="form">
|
||||||
|
<label>Copy link</label>
|
||||||
|
<input type="text" disabled value="https://www.youtube.com/watch?v=FMgraHfrw_o">
|
||||||
|
<span><i class='bx bx-copy' ></i></span>
|
||||||
|
</div>
|
||||||
|
<div class="media-share list-inline">
|
||||||
|
<label>Share</label>
|
||||||
|
<ul>
|
||||||
|
<lu><a href=""><i class='bx bxl-instagram' ></i></a></lu>
|
||||||
|
<lu><a href=""><i class='bx bxl-twitter' ></i></a></lu>
|
||||||
|
<lu><a href=""><i class='bx bxl-pinterest' ></i></a></lu>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="data-question" class="data-popup data_question">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="data-content">
|
||||||
|
<a href="#0" class="close-trigger" close-button><i class='bx bx-x'></i></a>
|
||||||
|
<h3>Question</h3>
|
||||||
|
<form action="">
|
||||||
|
<div><input type="text" placeholder="Name"></div>
|
||||||
|
<div><input type="text" placeholder="Email"></div>
|
||||||
|
<div><textarea placeholder="Leave us your question(s)" cols="30" rows="4"></textarea></div>
|
||||||
|
<div class="button">
|
||||||
|
<button type="submit" class="secondary-btn">Send</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="data-review" class="data-popup data_review">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="data-content">
|
||||||
|
<a href="#0" class="close-trigger" close-button><i class='bx bx-x'></i></a>
|
||||||
|
<h3>Leave a Review</h3>
|
||||||
|
<form action="">
|
||||||
|
<div class="dotgrid">
|
||||||
|
<div class="wrapper">
|
||||||
|
<div><input type="text" placeholder="Name"></div>
|
||||||
|
<div><input type="text" placeholder="Email"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rating">
|
||||||
|
<span>Rating: </span>
|
||||||
|
<div class="stars">
|
||||||
|
<input type="radio" name="rating" id="star5">
|
||||||
|
<label for="star5"><i class='bx bxs-star' ></i></label>
|
||||||
|
<input type="radio" name="rating" id="star4">
|
||||||
|
<label for="star4"><i class='bx bxs-star' ></i></label>
|
||||||
|
<input type="radio" name="rating" id="star3">
|
||||||
|
<label for="star3"><i class='bx bxs-star' ></i></label>
|
||||||
|
<input type="radio" name="rating" id="star2">
|
||||||
|
<label for="star2"><i class='bx bxs-star' ></i></label>
|
||||||
|
<input type="radio" name="rating" id="star1">
|
||||||
|
<label for="star1"><i class='bx bxs-star' ></i></label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div><input type="text" placeholder="Review title"></div>
|
||||||
|
<div><textarea placeholder="Your review" cols="30" rows="4"></textarea></div>
|
||||||
|
<div class="button">
|
||||||
|
<button type="submit" class="secondary-btn">Send</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
|
||||||
<script src="page.js"></script>
|
<script src="page.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue