Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

How to Add Pop-Up Info Boxes to Your Website

While pictures are worth a thousand words, those words might not be enough on your website to explain a particular topic relevant to your website.

Your content team can sometimes find that more information is needed on an image element to improve clarity about your website's topic.

This is where pop-ups come in handy. Pop-up elements indicate to your web visitors the presence of more information. Unlike other content elements, pop-ups are only triggered by users. This gives them the freedom to read or hide whatever information they'd like to see. Pop-up boxes also boost UX and engagement with your website -- offering your visitors more opportunity to click around and explore more.

Here's how to add these helpful pop-up boxes to your website:

HTML

The HTML uses Bootstrap 4's popper.js data attributes .

<div class="big-box-spaces py-5">
  <div class="container py-5">
    <section class="spaces">
      <div class="row">
       
        <div class="col-xs-12 box-space-photo">
          <div class="small-box-space-photo">
            <div class="mini-box-space-photo position-relative">
              <img src="https://s3.amazonaws.com/uploads.hipchat.com/485069/4047181/EWbdPrNIfyuao7j/upload.png" alt="Holstein space" class="w-100 img-responsive mt-3 mt-lg-0">
              <button type="button" class="pop-button button1" data-placement="bottom" data-trigger="click" data-toggle="popover" title="Did you know?" data-content="This purple planet is...Earth!"><span>+</span></button>
              <button type="button" class="pop-button button2" data-placement="bottom" data-trigger="click" data-toggle="popover" title="Did you know?" data-content="Dan Spacley Pilots the ship to a successful website!"><span>+</span></button>
              <button type="button" class="pop-button button3" data-placement="bottom" data-trigger="click" data-toggle="popover" title="Did you know?" data-content="Here you can see planet Markury, where your digital marketers roam."><span>+</span></button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

CSS

The CSS here styles and positions the buttons and the popups.


button {
  border: none;
  outline: 0;
}

.popover-body {
  text-align: center;
}
@media (min-width: 992px) {
  .spaces {
    display: flex;
    flex-direction: row;
  }
}



@media (max-width: 479px) {
  .spaces .box-text-space {
    text-align: center;
  }
}





.spaces .box-space-photo {
  position: relative;
  padding: 0;
}

@media (min-width: 992px) {
  .spaces .box-space-photo .small-box-space-photo {
    width: 100%;
  }
}

.spaces .box-space-photo .small-box-space-photo .mini-box-space-photo {
  position: relative;
}

@media (min-width: 1200px) {
  .spaces .box-space-photo .small-box-space-photo .mini-box-space-photo {
    margin-left: -15px;
  }
}

.spaces .box-space-photo .small-box-space-photo .mini-box-space-photo > button {
  height: 60px;
  width: 60px;
  border-radius: 100%;
  background-color: #f4ba41;
  position: absolute;
  text-align: center;
  line-height: 15px;
}


.spaces .box-space-photo .small-box-space-photo .mini-box-space-photo > button:hover {
  background-color: #fcda92;
}

.spaces .box-space-photo .small-box-space-photo .mini-box-space-photo > button > span {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  border: 2px solid #fff;
  font-family: normal;
  font-size: 39px;
  font-size: 39px;
  line-height: 35px;
  color: #fff;
  text-align: center;
}

.spaces .box-space-photo .small-box-space-photo .mini-box-space-photo > button.button1 {
  top: 8%;
  left: 57%;
}

.spaces .box-space-photo .small-box-space-photo .mini-box-space-photo > button.button2 {
  top: 35%;
  left: 44%;
}

.spaces .box-space-photo .small-box-space-photo .mini-box-space-photo > button.button3 {
  bottom: 10%;
  left: 80%;
}

.big-box-spaces {
  width: 100%;
  float: left;
  position: relative;
}


.popover {
  width: 350px;
  height: 350px;
  border-radius: 100%;
  border: 13px solid #ccc;
  max-width: 100%;
  background-color: #fff;
  bottom: -39px !important;
}

@media (max-width: 479px) {
  .popover {
    width: 260px;
    height: 260px;
  }
}

.popover .arrow {
  display: none;
}

.popover .popover-header {
  text-align: center;
  overflow: hidden;
  background-color: transparent;
  position: relative;
  overflow: visible;
  font-size: 30px;
}
.popover .popover-header:before {
  z-index: 3;
  content: "X";
  display: block;
  margin: 0 auto;
  position: absolute;
  top: -60px;
  left: 0;
  text-align: center;
  width: 100%;
  color: #000;
  padding-bottom: 20px;
  cursor: pointer;
  font-size: 35px;
  font-weight: normal;
  font-family: Helvetica;
  text-align: center;
}
.popover .popover-header .close {
  font-family: normal;
  font-size: 25px;
  color: #000;
  display: inline-block;
  opacity: 1;
  width: 35px;
  height: 35px;
  position: absolute;
  top: 40px;
  left: 50%;
  margin-left: -17.5px;
  background: url(http://ada2.solodev.net/core/fileparse.php/8/urlt/_resources/images/content/cross.png) no-repeat center center;
  text-indent: -10000px;
}

@media (max-width: 479px) {
  .popover .popover-header .close {
    top: 15px;
  }
}

.popover .popover-header {
  display: block;
  background-color: transparent;
  border: none;
  margin-top: 100px;
  font-family: Arial, Verdana;
  font-weight: 700;
  color: #0479c3;
  text-transform: uppercase;
}


.popover .popover-content {
  padding: 0 54px;
  font-family: "Helvetica", Arial, Verdana;
  font-size: 30px;
  font-weight: 400;
  color: #090a0e;
  text-align: center;
}
.popover-body {
  font-size: 20px;
}
@media (max-width: 479px) {
  .popover .popover-content {
    padding: 0 37px;
    font-size: 16px;
  }
  .popover-header {
    margin-top: 80px !important;
    font-size: 20px !important;
  }
  .popover-body {
  font-size: 14px;
}
}

JS

The JS simply initializes the popover and uses it's options to allow it to close on click.

$(function () {
  $('.pop-button').popover({
    trigger: 'focus'
  });
});

$('.popover-header').click(function() {
	$('.pop-button').popover('hide');
});

Want to see how it all looks before committing to its use? Check out the JSFiddle below. Hover over the background images to see the hover effect. Be sure to scale your browser windows to various sizes to see how these sections would look on mobile display.

Download from Github

Share on Facebook Tweet It

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev