Popup

Simple blueprint for overlay popup

by mromanbanks

HTML

<button id="open">Open Popup</button>
<p>
Trade in your eligible device for credit toward your next purchase, or get an Apple Store Gift Card you can use any time.1 If your device isn’t eligible for credit, we’ll recycle it for free. No matter the model or condition, we can turn it into something good for you and good for the planet.
</p>
<p>
Trade in your eligible device for credit toward your next purchase, or get an Apple Store Gift Card you can use any time.1 If your device isn’t eligible for credit, we’ll recycle it for free. No matter the model or condition, we can turn it into something good for you and good for the planet.
</p>
<p>
Trade in your eligible device for credit toward your next purchase, or get an Apple Store Gift Card you can use any time.1 If your device isn’t eligible for credit, we’ll recycle it for free. No matter the model or condition, we can turn it into something good for you and good for the planet.
</p>
<p>
Trade in your eligible device for credit toward your next purchase, or get an Apple Store Gift Card you can use any time.1 If your device isn’t eligible for credit, we’ll recycle it for free. No matter the model or condition, we can turn it into something good for you and good for the planet.
</p>

<div id="popup-content" class="popup active">
  <div class="popup-container">
  
  
  <button id="close">Close</button>
  <p>
Trade in your eligible device for credit toward your next purchase, or get an Apple Store Gift Card you can use any time.1 If your device isn’t eligible for credit, we’ll recycle it for free. No matter the model or condition, we can turn it into something good for you and good for the planet.
</p>
<p>
Trade in your eligible device for credit toward your next purchase, or get an Apple Store Gift Card you can use any time.1 If your device isn’t eligible for credit, we’ll recycle it for free. No matter the model or condition, we can turn it into something good for you and good for the planet.
</p>
<p>
Trade in your...

CSS

.active {
  display: none;
}

.overflow {
  overflow: hidden;
}

.popup {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  background: rgba(0,0,0,0.6);
  position: fixed;
  overflow: auto !important;
}

.popup-container {
  /* display: table; */
  width: 80%;
  margin: auto;
  background: wheat;
}

button {
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
  display: block;
}

JavaScript

$("#open").click(
  function() {
		$("#popup-content").removeClass("active");
    $("html").addClass("overflow");
})
$("#close").click(
	function() {$("#popup-content").addClass("active");
  $("html").removeClass("overflow");
  }
)