自定义jQuery UI对话框样式

Question

I have this dialog:

var dialog1 = $('<div>').dialog({ 
    autoOpen: false, 
    modal: true,
    closeText: null,
    hide: "scale",
    show:"fade",
    height: 'auto',
    width: 450,
    dialogClass:"edialog"
}); 

when I want to customize style,inline style overrides my style:

How can I force dialog to use my style without using !important or edit generated inline style?

Answer 1

You don't. Inline has the highest precedence over the selector chain. The only way to override it, that I know of, is to modify the DOM of the element or use !important .

I would say if they went through the trouble of defining the styles inline, it is for a good reason and probably shouldn't be modified.

---

Here would be the difference between using !important and changing the inline style with jQuery:

jQuery: $(".ui-dialog").css({ "position" : "fixed", "top" : "50%" });

css: .ui-dialog { position: fixed !important; top: 50% !important; } .ui-dialog { position: fixed !important; top: 50% !important; }

Dialog Options (Barmar's comment):

$(".my-form").dialog({ position: { my: "top", at: "top" } });

It depends on how you feel and want to manage your source code. CSS seems like a easier and more elegant solution to me if you can't do it through the properties the Dialog object exposes.

Answer 2

1. You find custom dialog in CSS

2. The example, if you want edit width of dialog, only add "!important" after width:

   .ui-dialog { position: relative; padding: .2em; width: 500px !important;}