LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
This Admin Bar is in an iframe.
CSS
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html, body {
  background: transparent;
}

.bar {
  height: 60px;
  background: #000;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 10px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.btn {
  padding: 10px;
}

.overlay {
  display: none;
  position: fixed;
  height: 100vh;
  width: 100vw;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.6);
}

.overlay--is-open {
  display: block;
}

.modal {
  width: 500px;
  height: 500px;
  background: #fff;
  margin: 80px auto;
  padding: 40px;
}
JS
window.onload = function() {
  window.addEventListener('message', function(e)   {  
    let message = e.data;
    console.log(message);
  });  
}

let domain = 'https://s.codepen.io';
let receiver = window.parent;
let modalBtn = document.querySelector('.btn');
let closeBtn = document.querySelector('.btn-close');
let overlay = document.querySelector('.overlay');

modalBtn.addEventListener('click', function() {
  openModal();
});

closeBtn.addEventListener('click', function() {
  closeModal();  
});

function openModal() {
  overlay.classList.add('overlay--is-open');
  receiver.postMessage('open_modal', 'https://s.codepen.io');   
}

function closeModal() {
  overlay.classList.remove('overlay--is-open');
  receiver.postMessage('close_modal', 'https://s.codepen.io');   
}
Term
Wed, 12/27/2017 - 06:57

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv