On Oct 2, 7:30 am, oribani <[email protected]> wrote:
> > > I'm trying to pop up a modal div for which I want to use 100% my own
> > > theming. I don't want a title bar, no buttons (easy), no jQuery UI
> > > themes necessary.
>
> > > It seems like jQuery UI adds too many things to a dialog, so maybe I
> > > have to look for another solution, but I really like the dialog API
> > > where it creates an overlay for me and makes my div modal and closes
> > > on ESC, and all that.
>
> > > So is there a way I can remove ALL of the jQuery UI theming and
> > > widgets from a dialog??
>
> > Oh, well, I guess I want to retain the overlay theme. I just need to
> > strip the dialog box itself.
>
> It looks like there are a lot of "popup" plugins and tutorials out
> there, but I'd still rather stick with the nice jQuery UI dialog API.
> If I have to ditch it, is there a way to use the jQuery modal overlay
> when doing my own popup?
>
> I tried to read the theming information and just hide the dialog's
> title bar to see if that was possible, but I'm not sure why these
> tests didn't do anything??
>
> $('#ui-dialog-title-dialog').text('HELLO WORLD');
> $('#ui-dialog-title-dialog').hide();
>
> But trying to un-theme it like that might be tricky? Especially
> because I DO use jQuery UI-themed dialogs elsewhere on my page and I
> don't want to kill them at the same time.
>
> Oh, OK, well for some reason this DOES work:
>
> $('.ui-dialog-titlebar').hide();
>
> But now I want to remove the margin it puts around my own content....
> I played with margins of the ui-dialog-* classes but couldn't figure
> that one out. Can someone tell me how to zero out the margins or
> whatever it's putting around my content? That's all I need to get it
> working I think!
>
> > > Oh, and close-on-click (anywhere) would be a nice feature to add....
I had a similar issue in that I wasn't using a custom theme, but
wanted to modify the default dialog styling. I added the following to
my own css file to modify my dialog objects:
/* jQuery ui dialog box */
.ui-dialog { border: 1px solid #000000; background-color: #eee8aa;
position: relative; width: 300px; }
.ui-dialog .ui-dialog-titlebar { padding-left: 10px; position:
relative; top: -2px; }
.ui-dialog .ui-dialog-title { font-weight: 900; }
.ui-dialog .ui-dialog-titlebar-close { background:url
('close_icon.png') no-repeat; text-decoration: none; position:
relative; height: 20px; width: 20px; top: +4px; left: +179px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; cursor:
pointer; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-
titlebar-close:focus { text-decoration: none; font-weight: 900; }
.ui-dialog .ui-dialog-content { font-size: 12px; font-weight: 500;
border-top: 1px solid #000000; padding: 10px; background: none;
overflow: no; zoom: 1; }
To close the dialog on a click event, add the following function:
<script type="text/javascript">
$(function() {
// close dialog on click
$("#dialog").click(function() {
$("#dialog").dialog('close');
});
});
</script>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
