> 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.
>
> Oh, well, I guess I want to retain the overlay theme. I just need to
> strip the dialog box itself.
>
> So is there a way I can remove ALL of the jQuery UI theming and
> widgets from a dialog??
>
> Oh, and close-on-click (anywhere) would be a nice feature to add....
Alright, digging around, I found the solution (have to modify the .ui-
widget-content class too). I hope this can be useful to someone else,
since this seems to be a way to use jQuery UI dialogs to pop up your
own content without any theming added by jQuery UI -- just your own
styles and nothing else. I am creating the dialog inside a function
that's called on demand and has content loaded via a RPC call, but
distilled down, this code should be usable for most anyone who doesn't
want to go install one of the million other jQuery dialog plugins or
roll their own:
// the variable "popup_selector" is passed to the
function,
// and is usually something like this:
//
// var popup_selector = '#popup';
//
$(popup_selector).dialog({
width: 980,
autoOpen: false,
bgiframe: true,
modal: true,
resizable: false,
dialogClass: 'popup_dialog',
});
// remove theming of dialog - just want our content to
show
//
$('.popup_dialog .ui-dialog-titlebar').css('display',
'none');
$('.popup_dialog.ui-dialog').css('border', '0px');
$('.popup_dialog.ui-widget-content').css('background',
'none');
// now open the dialog
//
$(popup_selector).dialog('open');
// close dialog on click
//
$(popup_selector).click(function() {
$(popup_selector).dialog('close');
});
// this allows you to close the dialog even
// if clicks are outside the dialog area
//
$('.ui-widget-overlay').click(function() {
$(popup_selector).dialog('close');
});
The HTML for this is simply: <div style="display:none" id="popup"></
div> As I mentioned, I put my content inside this div using an RPC
call, but it'd work just as well if you put static content inside it
from the get-go.
The only thing I don't like is that even though the dialog is set to
open AFTER I remove its theming, you see the full dialog box size
flash for a split second when it first opens, quickly scaled down to
just my content. Maybe this widget is just too heavy duty for a
simple popup of my own content. Maybe I should just grab the .ui-
widget-overlay class and use it in a more simple custom popup
function.
Does anyone know why I'd be seeing the full size dialog flash so
briefly at first? Is there a way to prevent that? Is it due to the
code in the open() function trying to size it out fully at first?
Maybe I'm stuck with 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
-~----------~----~----~----~------~----~------~--~---
