Question

我简单无法弄清楚如何在弹出窗口外显示隐藏溢出的关闭按钮。

我猜我应该很简单？我也尝试过研究jQuery，认为这个小按钮可以运行很多代码。

我查了一个帖子并测试了几件没有运气的东西。

<div class="popup-wrapper">
      <div class="popup-content">
      <span class="closeme"></span>
      <div class="item">
        <h3>HELLO</h3>  
      </div>
    </div>
    </div>

CSS

.popup-wrapper {
        background: rgba(0,0,0,.75);
        width: 100vw;
        height: 100vh;
        position: fixed;
        z-index: 998;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        transition: top ease-in-out .2s
    }

    .popup-content {
        background: #fff;
        padding: 40px;
        width: calc(100% - 80px);
        max-width: 300px;
        max-height: 200px;
        position: fixed;
        z-index: 998;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .closeme {
        position: absolute;
        z-index: 9999;
        top: -20px;
        right: 0px;
        width: 40px;
        height: 40px;
        background: red;
        border-radius: 999px;
        cursor: pointer;
        box-shadow: 0 0 25px 0 rgba(0,0,0,.16);
        transition: background ease-in-out .3s;
    }
    .closeme::before {
        content: "X";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        color: #fff;
    }

Answer 1

您不需要jQuery：您只需将.popup-content上的某些样式移至.item即可。你想要的是.item在溢出时滚动，因为在.popup-content父项上执行此操作将意味着隐藏关闭图标：

.popup-content {
  background: #fff;
  max-width: 380px;
  position: fixed;
  z-index: 998;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.popup-content .item {
    padding: 40px;
    max-height: 60vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

参见概念验证示例：

＆＃13;

.popup-wrapper {
  background: rgba(0, 0, 0, .75);
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 998;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: top ease-in-out .2s
}

.popup-content {
  background: #fff;
  max-width: 380px;
  position: fixed;
  z-index: 998;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.popup-content .item {
	padding: 40px;
	max-height: 60vh;
	overflow-y: scroll;
	overflow-x: hidden;
}

.closeme {
  position: absolute;
  z-index: 9999;
  top: -20px;
  right: 0px;
  width: 40px;
  height: 40px;
  background: red;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, .16);
  transition: background ease-in-out .3s;
}

.closeme::before {
  content: "X";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

＆＃13;

<body>


  <div class="popup-wrapper">
    <div class="popup-content">
      <span class="closeme"></span>
      <div class="item">
        <h3>HELLO</h3>
        <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo
          eget malesuada. Nulla quis lorem ut libero malesuada feugiat. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur arcu erat, accumsan id imperdiet et, porttitor
          at sem. Cras ultricies ligula sed magna dictum porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Donec rutrum congue leo eget malesuada. Praesent sapien massa,
          convallis a pellentesque nec, egestas non nisi. Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh. Pellentesque in ipsum id orci porta dapibus. Nulla porttitor
          accumsan tincidunt. Sed porttitor lectus nibh.</p>
        <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo
          eget malesuada. Nulla quis lorem ut libero malesuada feugiat. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur arcu erat, accumsan id imperdiet et, porttitor
          at sem. Cras ultricies ligula sed magna dictum porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Donec rutrum congue leo eget malesuada. Praesent sapien massa,
          convallis a pellentesque nec, egestas non nisi. Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh. Pellentesque in ipsum id orci porta dapibus. Nulla porttitor
          accumsan tincidunt. Sed porttitor lectus nibh.</p>
      </div>
    </div>
  </div>

  <body>

＆＃13;

添加关闭按钮以弹出（外溢：隐藏元素）

1 个答案: