Question posted in 
On this page i have some div’s that represent reviews. I know how to create a window(div) that will appear from top when i press “Read more…”. I don’t know how to transfer the information from current div in which i click “Read more…” to a window(div). The resulted window(div) should appear like this example. Here is my Codepen
<section class="review container">
<div class="row">
<div class="col-6 col-lg-3 review__block">
<div class="review__image">
<img class="review__photo"
srcset="https://i.imgur.com/In57n4W.png 1000w, https://i.imgur.com/In57n4W.png 2000w" alt="review photo" />
</div>
<div class="review__wrap">
<div class="review__date">
<p class="review__date-name">Old Name</p>
<p class="review__date-date">11.08.2019</p>
</div>
<div class="review__info">
<p class="review__name">Name once again</p>
<p class="review__text">
Bla bla bla bla
</p>
</div>
<a class="review__link" href="#">Read more...</a>
</div>
</div>
<div class="col-6 col-lg-3 review__block">
<div class="review__image">
<img class="review__photo"
srcset="https://i.imgur.com/In57n4W.png 1000w, https://i.imgur.com/In57n4W.png 2000w" alt="review photo" />
</div>
<div class="review__wrap">
<div class="review__date">
<p class="review__date-name">New name</p>
<p class="review__date-date">01.12.2019</p>
</div>
<div class="review__info">
<p class="review__name">Name again</p>
<p class="review__text">
Bla bla bla
</p>
</div>
<a class="review__link" href="#">read more...</a>
</div>
</div>
</div>
</section>
//Show warning
$(".review__link").click(function showWarning() {
let dialog = document.createElement("div"),
dialogOverlay = document.createElement("div");
dialogOverlay.className = "dialog-overlay";
dialog.className = "dialog";
dialog.innerHTML = `<p>Bla bla bla</p>`;
document.body.append(dialogOverlay, dialog);
setTimeout(() => {
dialogOverlay.remove();
dialog.remove();
}, 3000);
}).review__image {
display: -webkit-box;
display: flex;
}
.review__photo {
width: 100%;
}
.review__block {
margin-top: 15px;
}
.review__wrap {
padding: 13px;
background: #fafafa;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
}
.review__date {
display: -webkit-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
color: rgba(0, 0, 0, 0.87);
}
.review__date-name {
font: 500 10px/16px sans-serif;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.review__date-date {
font: normal 12px/16px sans-serif;
letter-spacing: 0.4px;
}
.review__info {
margin-bottom: 25px;
}
.review__name {
font: normal 16px/24px sans-serif;
letter-spacing: 0.15px;
color: rgba(0, 0, 0, 0.87);
margin-bottom: 20px;
}
.review__text {
font: normal 14px/20px sans-serif;
color: rgba(0, 0, 0, 0.6);
}
.review__link {
color: #018786;
display: block;
text-align: center;
font: normal 12px/16px sans-serif;
letter-spacing: 0.4px;
}
body {
background: grey;
}
.dialog-overlay {
background: rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
.dialog {
width: 500px;
padding: 30px 50px;
background: #fff;
position: fixed;
top: 50px;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.4);
font-size: 17px;
font-weight: 600;
text-align: center;
animation: window 0.5s 1;
}
@keyframes window {
0% {
top: -100px;
}
100% {
top: 50px;
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Starter" />
<meta name="author" content="Admin" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<title>Review</title>
<link rel="icon" href="images/favicon.png" />
</head>
<body>
<section class="review container">
<div class="row">
<div class="col-6 col-lg-3 review__block">
<div class="review__image">
<img class="review__photo"
srcset="https://i.imgur.com/In57n4W.png 1000w, https://i.imgur.com/In57n4W.png 2000w" alt="review photo" />
</div>
<div class="review__wrap">
<div class="review__date">
<p class="review__date-name">Old Name</p>
<p class="review__date-date">11.08.2019</p>
</div>
<div class="review__info">
<p class="review__name">Name once again</p>
<p class="review__text">
Bla bla bla bla
</p>
</div>
<a class="review__link" href="#">Read more...</a>
</div>
</div>
<div class="col-6 col-lg-3 review__block">
<div class="review__image">
<img class="review__photo"
srcset="https://i.imgur.com/In57n4W.png 1000w, https://i.imgur.com/In57n4W.png 2000w" alt="review photo" />
</div>
<div class="review__wrap">
<div class="review__date">
<p class="review__date-name">New name</p>
<p class="review__date-date">01.12.2019</p>
</div>
<div class="review__info">
<p class="review__name">Name again</p>
<p class="review__text">
Bla bla bla
</p>
</div>
<a class="review__link" href="#">read more...</a>
</div>
</div>
</div>
</section>
</body>
</html>
2
Answers
You can clone the
.review__wrapthat is closest to where the click event came from and append that to your dialog after removing the.review__link.(Obviously you could also edit any part of the cloned node before appending it.)
replace this with your current js