JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<span id="resaen" class="lan en">BOOK NOW</span>    

<span id="resafr" class="lan fr">RÉSERVER</span>

<span id="resade" class="lan de">BUCHEN</span>


<div id="page-resa"></div>
<div id="popup-resa"><iframe id="iframe-resa"></iframe></div>

CSS

iframe  { 
width: 100%;
height: 100%;
}

#resaen,#resafr, #resade { 
cursor:pointer;
}

#popup-resa { 
  display: none; 
  border: 0px black solid;
  width: 80%; 
  height: 80%; 
  top:10%; left:10%; right:0; bottom:0;
  background-color: white;
  z-index: 10;
  padding: 0em;
  position: fixed;
}

.darken:before {
  content: "X";
  position:fixed;
  top:5%;
  right:2%;
  color:#fff;
  cursor:pointer;
}

#page-resa { 
  display: none; 
  width: 100%; 
  height: 100%; 
  top:0px;
  left:0px;
  z-index: 9;
  padding: 0em;
  position: absolute;
}

.darken { background: rgba(0, 0, 0, 0.7); }

#iframe-resa { border: 0; }

html, body, #page-resa { height: 100%; }

JavaScript

document.getElementById("popup-resa").showpopup = function() {
  document.getElementById("popup-resa").style.display = "block";
  document.getElementById('iframe-resa').src = "https://secure.reservit.com/reservit/reserhotel.php?lang=EN&id=334&hotelid=254675";
  document.getElementById('page-resa').className = "darken";
  document.getElementById("page-resa").style.display = "block";
}



document.getElementById("resaen").onclick = function(e) {
  e.preventDefault();
  document.getElementById("popup-resa").showpopup();
}


document.getElementById("resafr").onclick = function(e) {
  e.preventDefault();
  document.getElementById("popup-resa").showpopup();
}


document.getElementById("resade").onclick = function(e) {
  e.preventDefault();
  document.getElementById("popup-resa").showpopup();
}



document.getElementById('page-resa').onclick = function() {
  if(document.getElementById("popup-resa").style.display == "block") {
    document.getElementById("popup-resa").style.display = "none";
    document.getElementById("page-resa").style.display = "none";
    document.getElementById('page-resa').className = "";
  }
};