如何将当前div中的信息放入模式窗口？

问题描述 投票：2回答：1

在此页面上，我有一些代表评论的div。我知道如何创建一个窗口（div），当我按“阅读更多...”时，该窗口将从顶部显示。我不知道如何将信息从当前div中单击“阅读更多...”的信息传输到window（div）。结果窗口（div）应显示为example。这是我的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>
javascript jquery html
1个回答
0
投票

您可以clone .review__wrap，即单击事件的来源closest，并在删除.review__link后将其附加到对话框中。

（显然，您还可以在添加克隆节点之前对其进行任何编辑。）

//Show warning
$(".review__link").click(function showWarning() {
  const clonedReviewWrap = $(this.closest('.review__wrap')).clone()
  $(clonedReviewWrap).find('.review__link').remove()
  let dialog = document.createElement("div"),
    dialogOverlay = document.createElement("div");

  dialogOverlay.className = "dialog-overlay";
  dialog.className = "dialog";

  $(dialog).append(clonedReviewWrap);
  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:0 1px 5px rgba(0,0,0,.2),0 3px 4px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.14)}.review__date{display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between;color:rgba(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:.4px}.review__info{margin-bottom:25px}.review__name{font:normal 16px/24px sans-serif;letter-spacing:.15px;color:rgba(0,0,0,.87);margin-bottom:20px}.review__text{font:normal 14px/20px sans-serif;color:rgba(0,0,0,.6)}.review__link{color:#018786;display:block;text-align:center;font:normal 12px/16px sans-serif;letter-spacing:.4px}body{background:grey}.dialog-overlay{background:rgba(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,.4);font-size:17px;font-weight:600;text-align:center;animation:window .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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.