> > > > 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; }
Thanks for that. I'm not sure where you do that theming, because for
me, you can't theme it until the dialog is in the DOM - that is, until
it has been created/displayed. So I have to do it dynamically.
Anyway, I distilled down from your styles what I needed:
$('#popup').dialog('open');
$('.ui-dialog-titlebar').hide();
$('.ui-dialog').css({'border' : '0px', 'padding' : '0px'});
$('.ui-dialog-content').css({'border' : '0px', 'padding' : '0px'});
However, there is STILL a margin at the top. I'm pulling my hair out
trying to figure out how to remove it, but can't for the life of me.
Can anyone suggest how to get rid of it?
> 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>
Thanks for that!
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
