ACME International Airport

Where We Fly Map (popup/new tab implementation)

Check out our new Where We Fly Map

img preview

See code example

Check out our new Where We Fly Map

iframe preview

See code example

Check out our new Where We Fly Map

Open in new tab Popup HOU-ABQ Popup HOU-LGA
See code example
Back to destination

Code example

Code example: img preview

HTML:

<div class="overlay overlay-img">
    <img src="../img/map-preview.jpg" />
    <iframe class="pop-iframe"
            id="tb-iframe-img"
            src="https://acme-airport.wherewefly.net/"
    ></iframe>
    <div class="show-map">
      <div class="icon popup-open">
        <svg viewBox="0 0 489.001 489.001">
          <path d="M2.2,168.151l-2.1-151.3c-0.1-7.7,6.2-14,13.9-13.9l151.3,2.2c12.1,0.2,18.1,14.8,9.5,23.4l-42.1,42.1l70,70l-65,65
    l-70-70l-42.1,42.1C17.1,186.251,2.4,180.251,2.2,168.151z"/>
          <path d="M421.3,136.551l42.1,42.1c8.6,8.6,23.2,2.6,23.4-9.5l2.2-151.3c0.1-7.7-6.2-14-13.9-13.9l-151.3,2.2
    c-12.1,0.2-18.1,14.8-9.5,23.4l42,41.9l-70,70l65,65L421.3,136.551z"/>
          <path d="M314.2,460.451c-8.6,8.6-2.6,23.2,9.5,23.4l151.3,2.2c7.7,0.1,14-6.2,13.9-13.9l-2.2-151.3c-0.2-12.1-14.8-18.1-23.4-9.5
    l-42.1,42.1l-70-70l-65,65l70,70L314.2,460.451z"/>
          <path d="M14,485.051l151.3-2.2c12.1-0.2,18.1-14.8,9.5-23.4l-42.1-42l70-70l-65-65l-70,70l-42.1-42.1c-8.6-8.6-23.2-2.6-23.4,9.5
    L0,471.151C0,478.851,6.3,485.151,14,485.051z"/>
        </svg>
      </div>
      <div class="icon popup-close">
        <svg viewBox="0 0 121.31 122.876">
          <path d="M90.914,5.296c6.927-7.034,18.188-7.065,25.154-0.068 c6.961,6.995,6.991,18.369,0.068,25.397L85.743,61.452l30.425,30.855c6.866,6.978,6.773,18.28-0.208,25.247 c-6.983,6.964-18.21,6.946-25.074-0.031L60.669,86.881L30.395,117.58c-6.927,7.034-18.188,7.065-25.154,0.068 c-6.961-6.995-6.992-18.369-0.068-25.397l30.393-30.827L5.142,30.568c-6.867-6.978-6.773-18.28,0.208-25.247 c6.983-6.963,18.21-6.946,25.074,0.031l30.217,30.643L90.914,5.296L90.914,5.296z"/>
        </svg>
      </div>
    </div>
  </div>

CSS:


.overlay {
    width: 100%;
    height: 180px;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
}
.map-preview {
    width: 100%;
    height: 180px;
    position: relative;
}
.map-preview img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}
.popup-img-map .map-preview img {
  display: none;
}
.pop-iframe {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left: 0;
  z-index: 1;
}
.popup-img-map .overlay-img
{
  background: rgba(2, 55, 100, 0.4);
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 40px;
  padding-bottom: 40px;
  top: 0;
  left: 0;
  overflow: hidden;
}
.popup-img-map .overlay-img .pop-iframe
{
  position: relative;
  box-sizing: border-box;
  width: calc(100% - 80px);
  height: 100%;
  max-width: 1200px;
  border:10px solid #fff;
  border-radius: 5px;
  box-shadow: 0 0 50px 20px rgba(0,0,0,0.4);
}
.show-map {
  width: 20px;
  height: 20px;
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
}
.show-map .icon {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.show-map svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: #fff;
}
.popup-open {
  display: block;
}
.popup-close {
  display: none;
}
.popup-img-map .popup-open {
  display: none;
}
.popup-img-map .popup-close{
  display: block;
}

@media (max-width: 600px) {
    .popup-img-map .overlay-iframe .pop-iframe {
        width: 100%;
        border: none;
    }
}

JS (jQuery):


  $(document).ready(function() {
    $('.overlay-img .show-map .icon').click(function () {
      $('body').toggleClass('popup-img-map');
    });
  });

Code example: iframe preview

HTML:

<div class="overlay overlay-iframe">
  <iframe class="pop-iframe"
          id="tb-iframe"
          src="https://acme-airport.wherewefly.net/"
  ></iframe>
  <div class="show-map">
    <div class="icon popup-open">
      <svg viewBox="0 0 489.001 489.001">
        <path d="M2.2,168.151l-2.1-151.3c-0.1-7.7,6.2-14,13.9-13.9l151.3,2.2c12.1,0.2,18.1,14.8,9.5,23.4l-42.1,42.1l70,70l-65,65
  l-70-70l-42.1,42.1C17.1,186.251,2.4,180.251,2.2,168.151z"/>
        <path d="M421.3,136.551l42.1,42.1c8.6,8.6,23.2,2.6,23.4-9.5l2.2-151.3c0.1-7.7-6.2-14-13.9-13.9l-151.3,2.2
  c-12.1,0.2-18.1,14.8-9.5,23.4l42,41.9l-70,70l65,65L421.3,136.551z"/>
        <path d="M314.2,460.451c-8.6,8.6-2.6,23.2,9.5,23.4l151.3,2.2c7.7,0.1,14-6.2,13.9-13.9l-2.2-151.3c-0.2-12.1-14.8-18.1-23.4-9.5
  l-42.1,42.1l-70-70l-65,65l70,70L314.2,460.451z"/>
        <path d="M14,485.051l151.3-2.2c12.1-0.2,18.1-14.8,9.5-23.4l-42.1-42l70-70l-65-65l-70,70l-42.1-42.1c-8.6-8.6-23.2-2.6-23.4,9.5
  L0,471.151C0,478.851,6.3,485.151,14,485.051z"/>

      </svg>
    </div>
    <div class="icon popup-close">
      <svg viewBox="0 0 121.31 122.876">
        <path d="M90.914,5.296c6.927-7.034,18.188-7.065,25.154-0.068 c6.961,6.995,6.991,18.369,0.068,25.397L85.743,61.452l30.425,30.855c6.866,6.978,6.773,18.28-0.208,25.247 c-6.983,6.964-18.21,6.946-25.074-0.031L60.669,86.881L30.395,117.58c-6.927,7.034-18.188,7.065-25.154,0.068 c-6.961-6.995-6.992-18.369-0.068-25.397l30.393-30.827L5.142,30.568c-6.867-6.978-6.773-18.28,0.208-25.247 c6.983-6.963,18.21-6.946,25.074,0.031l30.217,30.643L90.914,5.296L90.914,5.296z"/>
      </svg>
    </div>
  </div>
</div>

CSS:


.overlay {
    width: 100%;
    height: 180px;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
}
.popup-iframe-map .map-preview img {
    display: none;
}
.pop-iframe {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
    z-index: 1;
}
.popup-iframe-map .overlay-iframe
{
    background: rgba(2, 55, 100, 0.4);
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-top: 40px;
    padding-bottom: 40px;
    top: 0;
    left: 0;
    overflow: hidden;
}
.popup-iframe-map .overlay-iframe .pop-iframe
{
    position: relative;
    box-sizing: border-box;
    width: calc(100% - 80px);
    height: 100%;
    max-width: 1200px;
    border:10px solid #fff;
    border-radius: 5px;
    box-shadow: 0 0 50px 20px rgba(0,0,0,0.4);
}
.show-map {
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 3;
    top: 10px;
    right: 10px;
}
.show-map .icon {
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.show-map svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: #fff;
}
.popup-open {
    display: block;
}
.popup-close {
    display: none;
}
.popup-iframe-map .popup-open {
    display: none;
}
.popup-iframe-map .popup-close {
    display: block;
}

@media (max-width: 600px) {
    .popup-iframe-map .overlay-iframe .pop-iframe {
        width: 100%;
        border: none;
    }
}

JS (jQuery):

$(document).ready(function() {
    $('.overlay-iframe .icon ').click(function () {
      $('body').toggleClass('popup-iframe-map');
    });
  });

Code example: open in new tab

HTML:

<a href="https://acme-airport.wherewefly.net/" target="_blank">Open in new tab</a>

CSS/JS Not required