<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Overlay Nesting Demo</title>
<style>
body {
background: #111; color: #eee; font-family: system-ui, sans-serif;
display: grid; place-items: center; min-height: 100vh; margin: 0;
}
button#launch {
background:#444; color:#fff; border:none; padding:14px 22px; border-radius:10px; cursor:pointer;
font-size:16px;
}
button#launch:hover { background:#5a5a5a; }
/* Optional—but nice: slide-in animations by attachment side */
.app-overlay .app-dialog { transition: transform .25s ease, opacity .25s ease; opacity: 0; }
.app-overlay.open .app-dialog { opacity: 1; transform: translate(0,0); }
.app-overlay[data-side="right"] .app-dialog { transform: translateX(100%); }
.app-overlay[data-side="left"] .app-dialog { transform: translateX(-100%); }
.app-overlay[data-side="bottom"] .app-dialog{ transform: translateY(100%); }
.app-overlay[data-side="top"] .app-dialog { transform: translateY(-100%); }
</style>
</head>
<body>
<button id="launch">Open Fullscreen Overlay</button>
<!-- Your overlay engine -->
<script src="/core/overlay_extra.js"></script>
<script>
// (Optional) If your engine reads this for animations, set the data-side attribute when creating:
// You can do that inside your createOverlayDOM by setting overlay.dataset.side = options.attachSide || '';
document.querySelector('#launch').addEventListener('click', () => {
AppOverlay.openOverlay({
title: "Main Fullscreen Overlay",
fullscreen: true,
// Put any intro content you like
content: `
<p style="margin:0 0 12px 0; font-size:18px;">
This is the fullscreen parent overlay. Use the toolbar buttons to open nested overlays.
</p>
`,
// IMPORTANT: Use the `buttons` array with `overlay` objects to NEST overlays.
buttons: [
{
label: "Small Center",
overlay: {
title: "Small Centered Modal",
align: "center",
width: "40%", // centered percentage width
// height could be auto; add if you want a cap:
// height: "auto",
content: `
<p>This is a nested centered overlay (about 40% width).</p>
<p>It stacks on top of the fullscreen overlay.</p>
`,
buttons: [
{ label: "Close", action: AppOverlay.close }
]
}
},
{
label: "Right Drawer",
overlay: {
title: "Right-Side Drawer",
attachSide: "right",
width: "35%", // % width drawer
content: `
<p>This nested overlay is attached to the right side (35% width).</p>
`,
buttons: [
{ label: "Close", action: AppOverlay.close }
]
}
},
{
label: "Bottom Sheet",
overlay: {
title: "Bottom Sheet",
attachSide: "bottom",
height: "45%", // % height sheet
content: `
<p>This nested overlay slides up from the bottom (45% height).</p>
`,
buttons: [
{ label: "Close", action: AppOverlay.close }
]
}
}
]
});
});
</script>
</body>
</html>