javascript - 单击阅读更多内容后如何使每个框展开

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



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

所以我想要的是每当我单击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;
}

最佳答案

我不确定您在这里到底要问什么，但是如果您想弹出更多内容，则应该使用Modal。 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中定义自己的关键帧（但这很难完成）