9

I want to add a jQuery dialog modal to a form page. When the dialog box is triggered I see the the text content but with no CSS. I'm pulling in the jquery in the functions.php for the page:

wp_enqueue_script('jquery-ui-dialog');

The jquery css (jquery-ui-dialog.css) is under my wp-includes/css directory. I tried adding

wp_enqueue_style('jquery-ui-dialog');

but it not work. Does anybody know the proper way to enable jQuery Dialog.

Improve this question
2
  • 6
    wp_enqueue_style( 'wp-jquery-ui-dialog' );
    – Tom Auger
    Commented Oct 31, 2011 at 17:13
  • 3
    Also make sure that you add the 'wp-dialog' class to the dialog itself, so it can take advantage of those styles. They're pretty ugly though. Might be better off using the jQuery UI themed styles anyway.
    – Tom Auger
    Commented Oct 31, 2011 at 17:18

2 Answers 2

Reset to default
8

There is no jquery-ui-dialog style defined in WordPress Out of the box, you need to ue the stylesheets manually, when i needed to enqueue the jQuery-UI style i pulled it from google api CDN 

wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css');

but you can enqueue a local copy if you want like this:

wp_enqueue_style( 'myStylesheet', WP_PLUGIN_URL . '/path/stylesheet.css' );
Improve this answer
1
  • 6
    But, as the OP pointed out, WP3.x ships with jquery-ui-dialog.css out of box in wp-includes/css/. Strange that the stylesheet wouldn't be registered by default. wp_enqueue_style( 'wp-jquery-ui-dialog' ); queues it up perfectly.
    – Tom Auger
    Commented Oct 31, 2011 at 17:09
0

You can include the jquery-ui-dialog style in frontend using:

wp_enqueue_style( 'wp-jquery-ui-dialog' );
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.