javascript - 单击阅读更多信息时如何使每个框展开

Question

我遇到了一个问题，我希望每当我点击阅读更多时，它应该像图片一样弹出并展开，

我试过的解决方案；我已经尝试了通用阅读更多，但我注意到当我单击阅读更多时，带有阅读更多的那一列旁边的列也会延伸。

所以我想要的是每当我点击 readmore 时它会动画到屏幕中央并有一个关闭按钮。

提前谢谢你，这是codepen(有完整代码)

https://codepen.io/tickatop/pen/QXgaoJ

css部分代码

body{
    margin: 0;
    padding: 10;
}

#more {display: none;}

.flexContainer{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

Answer 1

我不是特别确定你在这里问的到底是什么，但如果你想弹出阅读更多内容，你应该使用模式。 https://www.w3schools.com/howto/howto_css_modals.asp

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

/* Modal Content/Box */

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  /* Could be more or less, depending on screen size */
}

/* The Close Button */

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

<!-- Trigger/Open The Modal -->
<button id="myBtn">Read more</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. Lectus proin nibh nisl condimentum id venenatis a condimentum
      vitae. Ut lectus arcu bibendum at varius. Posuere ac ut consequat semper viverra nam libero justo. Praesent tristique magna sit amet purus gravida quis blandit turpis. Accumsan lacus vel facilisis volutpat est velit egestas dui. Quisque id diam
      vel quam elementum pulvinar etiam. Enim ut tellus elementum sagittis. Condimentum mattis pellentesque id nibh tortor id. Nibh cras pulvinar mattis nunc sed blandit libero volutpat sed. Diam in arcu cursus euismod quis. Ut consequat semper viverra
      nam libero justo laoreet sit amet. Magna fermentum iaculis eu non diam phasellus vestibulum lorem. Scelerisque in dictum non consectetur a erat. Donec ac odio tempor orci dapibus ultrices in. Enim ut sem viverra aliquet eget sit. Malesuada fames
      ac turpis egestas sed. Enim tortor at auctor urna nunc id cursus metus aliquam. In pellentesque massa placerat duis ultricies lacus sed. Felis imperdiet proin fermentum leo vel orci. Neque volutpat ac tincidunt vitae. Sit amet justo donec enim diam
      vulputate ut pharetra sit. Neque vitae tempus quam pellentesque nec. Vitae tortor condimentum lacinia quis vel eros donec ac. Pellentesque habitant morbi tristique senectus et. Non blandit massa enim nec. Amet consectetur adipiscing elit pellentesque
      habitant. Vel elit scelerisque mauris pellentesque.</p>
  </div>

</div>

此外，如果您希望 Modal 的外观像 CodePen 上的其他容器一样放大，您应该考虑使用 JQuery UI 转换。您可以在 CSS 中定义自己的关键帧(但这是一项更难的工作)