Popup

by Kevin Pliester

HTML

<div class="container">

  <div class="dh-popup-shadow"></div>
  <div class="dh-popup">
    <div class="dh-popup-header">
      <h2>Unsere Filialien</h2>
      <div class="close">X</div>
    </div>
    <div class="dh-popup-content">
      <div class="dh-tabs">
        <div class="dh-tabs-heading">
          <ul>
            <li class="active"><a href="#dh-tab-bayreuth">Bayreuth</a></li>
            <li><a href="#dh-tab-chemnitz">Chemnitz</a></li>
            <li><a href="#dh-tab-gera-1">Gera Armthorpassage</a></li>
            <li><a href="#dh-tab-gera-2">Gera Arcaden</a></li>
            <li><a href="#dh-tab-weimar">Weimar</a></li>
          </ul>
        </div>
        <div class="dh-tabs-content">
          <div id="dh-tab-bayreuth" class="active">
            Bayreuth
          </div>
          <div id="dh-tab-chemnitz">
            Chemnitz
          </div>
          <div id="dh-tab-gera-1">
            Gera Armthorpassage
          </div>
          <div id="dh-tab-gera-2">
            Gera Arcaden
          </div>
          <div id="dh-tab-weimar">
            Weimar
          </div>
        </div>
      </div>
    </div>
  </div>

  <iframe src="https://devhats.de" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>

</div>

CSS

.container {
  font-family: arial;
  min-width: 100%;
  position: realtive;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden
}

iframe {
  border: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.dh-popup-shadow {
  background-color: rgba(19, 58, 152, .75);
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  display: none;
}

.dh-popup {
  background-color: rgba(255, 255, 255, 1);
  max-width: 678px;
  width: 100%;
  height: auto;
  position: fixed;
  left: 50%;
  margin: auto;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: none;
  webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}


/**
 * Popup Header
 */

.dh-popup-header {
  padding: 25px 25px 12.5px 25px;
  border-bottom: 1px solid #f3f3f4;
}

.dh-popup-header .close {
  float: right;
  color: #133a99;
  cursor: pointer;
}

.dh-popup-header h2 {
  display: inline;
  color: #133a99;
}


/**
 * Popup Content
 */

.dh-popup-content {}


/***************************************
 *              TABS                   *
 ***************************************/


/** 
 * Heading
 */

.dh-tabs .dh-tabs-heading {
  border-bottom: 2px solid #c1c1c1;
}

.dh-tabs .dh-tabs-heading ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.dh-tabs .dh-tabs-heading ul li {
  display: inline-block;
}

.dh-tabs .dh-tabs-heading ul li a {
  display: block;
  padding: 50px 5px 25px;
  text-decoration: none;
  color: #888888;
  border-bottom: 2px solid #c1c1c1;
  margin-bottom: -2px;
}

.dh-tabs .dh-tabs-heading ul li.active a,
.dh-tabs .dh-tabs-heading ul li a:hover {
  border-bottom: 2px solid #133a99;
  margin-bottom: -2px;
  color: #133a99;
}


/**
 * Content
 */

.dh-tabs .dh-tabs-content > div {
  display: none;
  padding: 25px;
  background-color:...

JavaScript

jQuery(function($) {

  // activate popup
  var dhShowPopup = false;

  /**
   * Popup Functions
   */

  if (dhShowPopup == false) {

    $('.dh-popup').fadeIn();
    $('.dh-popup-shadow').fadeIn();

  } else {

    // Check Cookie
    if (getCookie('popup') != "") {
      $('.dh-popup').hide();
      $('.dh-popup-shadow').hide();
    } else {
      $('.dh-popup').fadeIn();
      $('.dh-popup-shadow').fadeIn();
      document.cookie = "popup=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
    }
  }

  // Check popup
  if ($('.dh-popup').length) {
    // Close popup
    $('.dh-popup .close').on('click', function(e) {
      $(this).parent().parent().fadeOut();
      $('.dh-popup-shadow').fadeOut();
      if (dhShowPopup == true) {
        document.cookie = "popup=hide";
      }
    });
  }

  /**
   * Tabs
   */

  if ($('.dh-tabs').length) {
    $('.dh-tabs .dh-tabs-heading a').on('click', function(event) {
      var dhTabTarget = $(this).attr('href');
      $('.dh-tabs .dh-tabs-content > div').removeClass('active');
      $('.dh-tabs .dh-tabs-heading li').removeClass('active');
      $(dhTabTarget).addClass('active');
      $(this).parent().addClass('active');
      event.preventDefault();
    });
  }

});

// Copyright: w3schools.com
function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}