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.

  • 6
    wp_enqueue_style( 'wp-jquery-ui-dialog' ); – Tom Auger Oct 31 '11 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 Oct 31 '11 at 17:18
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' );
  • 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 Oct 31 '11 at 17:09
0

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

wp_enqueue_style( 'wp-jquery-ui-dialog' );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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