This idea is inspired by the topic Multiple modals overlay
I am working on developing a folder modal that allows users to either 1) open an existing file or 2) create a new file within each folder modal.
To see how it functions, please run the code below. You'll need to interact with buttons and list items to trigger the modals.
However, instead of using dialogs, this operates in full-screen mode via Bootstrap.
https://i.sstatic.net/hlLf4.png
Clicking a button adds a folder item to the list. Clicking "This is folder ###" opens a modal as depicted here:
https://i.sstatic.net/Kz7CR.png
You can then proceed to create a file:
https://i.sstatic.net/gyWu4.png
The issue that needs to be addressed is when a file item is clicked, the file modal should overlay on top of the folder modal. Currently, they both close and do not remain visible simultaneously.
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b6bbbba0a7a0a6b5a494e1fae6fae6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="45272a2a31363137243505706b776b77">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body>
<button class="btn btn-primary" id="addnewfolder">Create new folder</button>
<ul class="list-group folder"></ul>
<script>
$("#addnewfolder").click(function(event) {
var code = (Math.random() + 1).toString(36).substring(7)
$(".folder").append(`<li class="list-group-item">
<img src="https://img.icons8.com/officel/48/null/live-folder.png" class="float-start" />
<div class="ms-5" data-bs-toggle="modal" href="#modal-toggle-${code}">This is folder ${code}<br />
<div>
<div class="modal fade" id="modal-toggle-${code}" aria-hidden="true" aria-labelledby="modal-toggleLabel" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="modal-toggleLabel">Inside Folder ${code}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<ul class="list-group file"></ul>
<button data-bs-target="#modal-toggle2" data-bs-toggle="modal" class="btn btn-primary file-${code}">Add File Inside ${code}</button>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>`);
//$(`#modal-toggle-${code}`).modal("show");
$(`.file-${code}`).click(function(event) {
var dcode = Math.floor(Math.random() * 10);
$(".file").append(`<li class="list-group-item">
<img src="https://img.icons8.com/cotton/64/null/happy-file.png" class="float-start" />
<div class="ms-5">This is file inside ${code}-${dcode}<br />
<small class="text-secondary">This is a ${code}-${dcode} item description</small>
<div>
<div class="modal fade" id="modal-toggle-${code}-${dcode}" aria-hidden="true" aria-labelledby="modal-toggleLabel" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="modal-toggleLabel">Inside Folder</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hello World
</div>
<div class="modal-footer">
<button class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>`);
//$(`#modal-toggle-${code}-${dcode}`).modal("show");
});
});
$(document).on('show.bs.modal', '.modal', function() {
const zIndex = 1040 + 10 * $('.modal:visible').length;
$(this).css('z-index', zIndex);
setTimeout(() => $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'));
});
</script>
</body>