3D model test Modal

by HcJanni

HTML

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body>
<nav>
  <div class="navbar">
  <h1>Weiterverarbeitung</h1>
  <h2><a >Bindearten</a> <a>Falzarten</a> <a>Veredelungen</a> <a>Schneiden</a> <a>Laminieren</a></h2>
  </div>
</nav>

<div class="grid-container grid-container--fit">


<div class="grid-element modell">
    <iframe title="Weiterverarbeitung" frameborder="0" width="100%" height="100%" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/faf947997ac4410d9cf264a15dafab82/embed?ui_theme=dark">
    </iframe>
    <!-- Trigger/Open The Modal -->

<div class="test"><button id="myBtn">Open Modal</button></div>
</div>


<div class="grid-element modell">
<iframe id="a008f724-ecd3-4b7f-82e9-bd4a92a86939" src="https://www.vectary.com/viewer/v1/?model=a008f724-ecd3-4b7f-82e9-bd4a92a86939&env=studio3" frameborder="0" width="100%" height="100%"></iframe></div>


<div class="grid-element modell">
<iframe id="bccd429b-606f-460b-9d19-699a92e52912" src="https://www.vectary.com/viewer/v1/?model=bccd429b-606f-460b-9d19-699a92e52912&env=studio3" frameborder="0" width="100%" height="100%"></iframe></div>


</div>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content w3-animate-top">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
    <iframe title="Weiterverarbeitung" frameborder="0" width="100%" height="500vh" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/faf947997ac4410d9cf264a15dafab82/embed?ui_theme=dark">
    </iframe>
  </div>

</div>
</body>

CSS

* {
  margin: 0;
  padding: 0;
  font-family: helvetica;
}

h1 {
  text-align: center;
  font-size: 8vw;
  top: 2vh;
  position: relative;
}

h2 {
  text-align: center;
  font-weight: 400;
  margin-top: 3vh;
  font-size: 2.5vw;
}

.navbar {
  background: rgb(87,235,222);
  background: linear-gradient(135deg, rgba(87,235,222,1) 0%, rgba(174,251,42,1) 100%);
  height: 75vh;
}

.grid-container {
    display: grid;
}

.grid-container--fit {
    grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
    grid-template-rows: 20em 20em 20em;
}

.grid-element {
  background-color: white;
  color: #fff;
  border: 1px solid #fff;
  position: relative;
}




.test {
  background-color: black;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  z-index: 1;
}

/*.test:hover {
  opacity: 0;
  z-index: -1;
}

  .modell {
  background-color: gray;
  z-index: 2;
}

/*.modell:hover {
  z-index: 99;
}*/




/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}


@media screen and (max-width: 540px) {
    h2 {
      
    }
}

#myBtn {
  margin-top: 45%;
  margin-left: 35%;
}

JavaScript

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}