90 lines
2.2 KiB
HTML
90 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Stacked Iframes with Opacity & Scrollbar</title>
|
|
<style>
|
|
/* common full-screen container */
|
|
.full-screen {
|
|
position: fixed;
|
|
top: 0; left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
margin: 0; padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* background layer (fills entire screen again) */
|
|
#layer1 {
|
|
z-index: 1;
|
|
}
|
|
|
|
/* top layer: semi-transparent + scrollable */
|
|
#layer2 {
|
|
z-index: 2;
|
|
opacity: 0.7;
|
|
/* overflow-y: scroll; */
|
|
}
|
|
|
|
/* restore: every full-screen iframe fills its parent */
|
|
.full-screen iframe {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
}
|
|
|
|
/* stack two 100vh-high iframes inside layer2 */
|
|
#layer2 iframe {
|
|
height: 100vh; /* overrides the 100% so each iframe is full viewport */
|
|
}
|
|
|
|
/* custom cyan scrollbar for WebKit */
|
|
#layer2::-webkit-scrollbar {
|
|
width: 12px;
|
|
}
|
|
#layer2::-webkit-scrollbar-thumb {
|
|
background: cyan;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* custom scrollbar for Firefox */
|
|
#layer2 {
|
|
scrollbar-color: cyan transparent;
|
|
scrollbar-width: thin;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Background layer, now again truly full-screen -->
|
|
<div id="layer1" class="full-screen">
|
|
<iframe src="../3/arc_reactor.html"></iframe>
|
|
</div>
|
|
|
|
<!-- Top layer: semi-transparent, scrollable, two iframes -->
|
|
<div id="layer2" class="full-screen">
|
|
<iframe id="chat" src="../3/Chat_page.html"></iframe>
|
|
<!-- <iframe src="../3/Chat_page.html"></iframe> -->
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
// Listen for messages from the parent
|
|
window.addEventListener('message', (event) => {
|
|
if (event.origin !== window.location.origin) return; // Security check
|
|
|
|
const message__object = event.data;
|
|
|
|
const id_of_recipant__iframe_element = document.getElementById('chat').contentWindow;
|
|
id_of_recipant__iframe_element.postMessage(message__object, '*'); // Forward to iframe2
|
|
});
|
|
</script>
|
|
|
|
<!-- <p id="output">No message yet.</p> -->
|
|
</body>
|
|
</html>
|