IK wil dat als dialogs elkaar overlappen, en je klikt op de onderste, dat deze dan boven komt te staan.
De z-index wordt dus veranderd. Verder wil ik ook een manier hebben om een nieuw geopende dialog meteen bovenaan te zetten.
Hieronder zie je hoe ik mijn dialogs maak. De stack property gebruik ik al, maar die werkt aleen ans ik de dialog versleep met de handle. Dus alleen als ik een dialoog versleep komt die bovenaan te staan.
Om te kijken of er in een dialoog geklikt wordt kan ik de focus property gebruiken, maar ik weet niet hie ik dan de dialoog op de top krijg.
$(document).ready(function() {
$(".dialog").draggable({
handle: ".handle",
containment: "document",
stack: ".dialog",
start: function() {
$("body").css("overflow", "hidden");
},
stop: function() {
$("body").css("overflow", "auto");
}
});
$(".dialog .handle a").click(function() {
$(this).closest(".dialog").fadeOut("fast");
});
});
<div class="dialog" id="d-example">
<div class="handle">
Voorbeeld<a href="#" class="closer">x</a>
</div>
<div class="dialog-content">
Inhoud
</div>
</div>
Het moet hetzelfde gaan werken als de vensters in windows bijvoorbeeld.
