I want to have a dialog that looks kinda like this:
I thought this approach would work but I guess I was wrong:
JavaScript
//Creates The Dialog
$('.ImageDialogDiv').dialog({
position: [98, 223],
resizable: false,
//modal: true, /* UNCOMMENT AFTER DEBUGGING */
closeOnEscape: false,
class: 'OverwriteDialogOverflow',
title: $('#hiddenDialogElements').html(),
open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});
CSS
/*
* Overrides hidden overflow
*/
.OverwriteDialogOverflow
{
overflow: visible;
}
HTML
<div id = "dialogDiv" class = "ImageDialogDiv"></div>
<div id = "hiddenDialogElements">
<button id = "hiddencloseButton">Close</button>
<div id = "hiddenArrowButtons">
<button class = "ArrowButtonDialogLeft" onclick = "ShowNextImage(-1)" ></button>
<button class = "ArrowButtonDialogRight" onclick = "ShowNextImage(1)" ></button>
</div>
</div>
When I attempt to move the arrows or close button off of the dialog, then get cut off and will not be visible. I though that adding .OverwriteDialogOverflow
would take care of that.
Suggestions?
For the close button to move outside I have written this code
in dialog create section.
I'll edit this with more detail if/when you update the post, but what I would do is put the dialog and buttons in a container div with relative positioning, and use absolute positioning to place the buttons. Something like below...
HTML:
CSS:
Edit: added .ui-dialog CSS as per comment