On 10月2日, 午後12:13, 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; }
>
> 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?
Below is what I see for the css provided by jQuery UI for all
dialogs. I just don't see the upper margin above my content, but
firebug shows it being part of the ui-dialog-content div, and that my
content (div) starts below that margin. What gives? It has to be
there, but I'm just missing something.... what?
/* Dialog
----------------------------------*/
.ui-dialog { position: relative; padding: .2em; width: 300px; }
.ui-dialog .ui-dialog-titlebar { padding: .5em .3em .3em 1em;
position: relative; }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 0 .2em; }
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .
3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height:
18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin:
1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-
titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { border: 0; padding: .5em 1em;
background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px
0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .
5em .4em; }
.ui-dialog .ui-dialog-buttonpane button { float: right; margin: .5em .
4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-
height: 1.4em; width:auto; overflow:visible; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px;
bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
