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?
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:
<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>
</div>
CSS:
.OverwriteDialogOverflow { overflow: visible; }
#dialogContainer { position: relative; }
#hiddencloseButton {
position: absolute;
top: -15px;
right: -15px;
}
#hiddenArrowButtons {
position: absolute;
bottom: -30px;
}
.ui-dialog { overflow: visible; }
Edit: added .ui-dialog CSS as per comment
For the close button to move outside I have written this code
$(".ui-dialog-titlebar-close").css('background-image', 'url(../../images/closePopUpX.png)');
$(".ui-dialog-titlebar-close").css('width','25');
$(".ui-dialog-titlebar-close").css('height','25');
$(".ui-dialog-titlebar-close").css('top','-7px');
$(".ui-dialog-titlebar-close").css('right','-15px');
$(".ui-dialog-titlebar-close").css('background-repeat','no-repeat');
$(".ui-dialog-titlebar-close").css('background-position','center center');
$(".ui-dialog").css('overflow','visible');
$('.ui-icon').css('display','none');
in dialog create section.