Question

I have a main.htm file with its own css references. I want to open a jQuery UI dialog when user clicks a button on main.htm. There is a .js file (referenced in main.htm) which handles this process.
My question is: how can I have the dialog with jQuery UI style but without adding any css file in main.htm? Thanks.

Answer 1

I’m not entirely sure what you’re trying to accomplish. It might help to explain your goal. You’re going to need some CSS one way or another to achieve styling. It seems you’re caught on the best way to inject this styling into your document dynamically – true?

1. If you’re using jQuery UI at all, then you should have the jQuery ui css file included in whatever HTML document you’re using. If for whatever reason, it’s not available when the button is clicked (say you’re trying to reduce requests…), you can programmatically append the <link rel="href" type="stylesheet" href="..." /> with jQuery via jQuery('head').append('<link>',{ ...attrs ... });

2. If you already have jQuery ui, but want a particular dialog to have a different styling than the rest of your dialogs, jQuery ui has a built in facility for this in Themeroller via the CSS scope parameter (available within the advanced theme settings on the jQuery ui download page)

---

I noticed your concerned about modifying main.html – possibly because you don’t want the jQuery ui styles affecting the rest of your site. You should be okay: the jQuery ui stylesheets are extremely specific, they’re not going to make global changes to styling on your site i.e. affect the body font.

You can further prevent any conflicts (likely to only occur if the main.html starts using it’s own jQuery ui) by using the optional namespace during themeroller export – If conflicts are your primary concern and reason for avoiding appending to main.html.

Using an IFRAME is going to have it’s own problems: such as confining the dragging of the ui dialog to within the iframe – potentially rendering it useless. You might be able to hack together something where the iframe housing the ui dialog is absolutely repositioned as you move the dialog inside.

You’re better off challenging the restriction on modifying main.html vs. working around it with a hack. The tradeoff between maybe, in a blue moon, breaking the clients styling vs. just having a really busted jQuery ui dialog dancing around in an absolutely positioned iframe is not worth it IMO.