PopUp Input

by Mrt Ja

HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<button id="popupButton1">POPUP 1 ÖFFNEN</button>
<button id="popupButton2">POPUP 2 ÖFFNEN</button>
<div id="modalBG">
  <div id="modal">
    <div id="closeBtn"><i class="material-icons">&#xE5CD;</i></div>
    <div id="demo"></div>
  </div>
</div>

CSS

#modal {
  display: none;
  height: 400px;
  width: 600px;
  z-index: 10;
  background: white;
  border: 1px solid #999;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, .15);
  animation-name: modalAnimation;
  animation-duration:0.25s;
  animation-timing-function: ease;
}
#modalBG {
  display: none;
  position: fixed;
  justify-content: center;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.15);
}
@-webkit-keyframes modalAnimation {
  from {transform: scale(0.1);}
  to {transform: scale(1), transformOrigin:"50% 50%";}
}
#closeBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  float: right;
  height: 50px;
  width: 50px;
}
#closeBtn:hover {
  cursor: pointer;
  background: #ff4d4d;
}

JavaScript

//HTML CODE IN POPUP SCHREIBEN
function test1(){
	document.getElementById("demo").innerHTML = "test1";
}
//HTML CODE IN POPUP SCHREIBEN
function test2(){
	document.getElementById("demo").innerHTML = "test2";
}
//LEERES POPUP ÖFFNEN
function openModal() {
	var modal = document.getElementById('modal');
  var modalBG = document.getElementById('modalBG');
  modal.style.display = "block";
  modalBG.style.display = "flex";
}
//LEERES POPUP SCHLIESSEN MIT CLICK AUF X
function closeModal() {
	var modal = document.getElementById('modal');
  var modalBG = document.getElementById('modalBG');
  modal.style.display = "none";
  modalBG.style.display = "none";
}
//LEERES POPUP SCHLIESSEN MIT CLICK AUSSERHALB
window.onclick = function(event) {
var modal = document.getElementById('modal');
var modalBG = document.getElementById('modalBG');
    if (event.target == modalBG) {
        modalBG.style.display = "none";
        modal.style.display = "none";
    }
}
//EVENT LISTENER
document.getElementById("popupButton1").addEventListener('click', function() {
	openModal();
	test1();
});
//EVENT LISTENER
document.getElementById("popupButton2").addEventListener('click', function() {
	openModal();
	test2();
});