Contain Dialog Windows to a Div
I'm working with code to open multiple dialogs in a cascading fashion in a desktop type environment. The issue is keeping the dialogs from opening outside the container "#desktop" div. After about 10 or so dialogs have opened, they continue to cascade outside of the #desktop div that I want to be the container. I have tried the containment option, using positioning option with at: and within: with no luck. I can set the draggable option div to #desktop and it stays in the div correctly as soon as it moves. I have a fiddle setup for testing
here. I have included a screen shot of what is happening as well. I have added a border to the #desktop div to show the dialogs opening outside of the div.
Here is my code so far:
var dialogOffset = { top: 10, left: 200 }; $('button').click(function () { var parent = $('#desktop'); var parentPos = parent.offset(); var parentIndex = $('#desktop').index(parent); var numDialogs = $('.dlg' + parentIndex).length; var dialogTop = parentPos.top + dialogOffset.top + numDialogs * 30; var dialogPosition = [parentPos.left + dialogOffset.left + numDialogs * 30, dialogTop]; $('<div class="dlg' + parentIndex + '"></div>').dialog({ position: dialogPosition, width: 250, close: function () { $(this).dialog('destroy').remove(); } }); });
Any Help Would Be Appreciated. Thanks