CODEWITHSUNDEEP
htmlcss
Keviin Cosmos
Keviin Cosmos

Reputation: 187

Add close button to popup (outside overflow: hidden element)

I simple can't figure out how to show my close button outside my popup which have overflow hidden.

I should be very simply i guess? I've also tried looking into jQuery, bu think it's a lot of code to make this little button work.

I've looked in a thread and tested several things with no luck.

JS Fiddle here

<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;
    }

Upvotes: 0

Views: 478

Answers (1)

Terry
Terry

Reputation: 66103

You don't need jQuery: what you need is simply to move some of the styles on .popup-content to .item. What you want is the .item to scroll when overflowing, because doing that on the .popup-content parent will mean hiding the close icon:

.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;
}

See proof-of-concept example:

.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;
}
<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>

Upvotes: 1

Related Questions