How to set up your own pop-up window…

A pop up window is a great UI tool to use on your site when you need to provide information or a element on your site but it either isn’t necessary to load on the page at first sight or require it as space might be limited on your site.

You can use this tool for a whole spectrum of reasons, it could be to load a product page in a minimised browser so the customer can carry on browsing your collection quickly, it could used as a contact form for product enquires or just a simple size chart pop up… The choice is yours!

If used properly it could be a great addition as CTA button, drawing in the audience to click on it to reveal what’s behind the actual button maybe?

 

Where to start?

Find an appropriate place to locate the button, for instance an enquiry form on a product page if your product is out of stock? Right underneath the product title:

Code placement

Copy and paste!

Pop up button

Simply copy and paste this code into where you’d like your button too appear on the page:

 

<div class="btn" id="myBtn">HELLO</div>

 

The following code needs to be pasted below the button, this is the html code that will be the pop up window:

<!-- The Pop up-->
<div id="mypopup" class="popup">
  <!—Pop up content -->
  <div class="popup-content">
    <span class="close">&times;</span>
“HELLO”
        </div>
  </div>
</div>      

 

Styling

Now lets add some style elements to the pop up, if confident with css then feel free to edit this:

<style>
/* The Pop up(background) */
.popup {
  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 */
}
 
/* Pop up Content/Box */
.popup-content {
  background-color:#2c2c2c;
  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;
}
</style>

 

Now let’s put it all together

<script>
// Get the Pop up
var popup = document.getElementById("mypopup");
 
// Get the button that opens the Pop up
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 Pop up
btn.onclick = function() {
  popup.style.display = "block";
}
 
// When the user clicks on <span> (x), close the Pop up
span.onclick = function() {
  popup.style.display = "none";
}
 
// When the user clicks anywhere outside of the Pop up, close it
window.onclick = function(event) {
  if (event.target == popup) {
    popup.style.display = "none";
  }
}
</script>
 

There you are, SIMPLES!

Pop up window

Back to blog