Question

我在网站上的不同对话框中使用jQuery UI对话框。现在我想知道是否有一种简单的方法可以为不同的对话框使用不同的样式？

E.g。像“真的删除...”这样的提醒应该有与其他消息不同的风格......

现在，对话框中使用了类：

<div id="dialog-confirm" title="Title of dialog">Text of dialog</div>

但是，实际样式应用于.ui-widget-header，~~，我在源文本中找不到任何地方，所以我想jQuery在某个时候取代了这个，这是真的吗？~~

编辑：来自docs.jquery.com：

Sample markup with jQuery UI CSS Framework classes

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div>
   <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
      <p>Dialog content goes here.</p>
   </div>
</div>
Note: This is a sample of markup generated by the dialog plugin, not markup you should use to create a dialog. The only markup needed for that is <div></div>.

能够为不同的对话框设置不同的样式的最佳方法是什么？

Answer 1

也直接来自jQuery网站：

$( ".selector" ).dialog({ dialogClass: "alert" });

它说

指定的类名将被添加到对话框中，以用于其他主题。

Answer 2

         <div id="dialog-confirm" title="Title of dialog" style="//put your styling here" >Text of dialog</div>

像这样的内联样式覆盖所有css表

您可以将不同的DIV用于不同的对话框，

          <div id="dialog-confirm0" title="Title of dialog" style=" put your styling here>Text of dialog</div> 
          <div id="dialog-confirm1" title="Title of dialog" style=" put your styling here>Text of dialog</div> 
          <div id="dialog-confirm2" title="Title of dialog" style=" put your styling here>Text of dialog</div>

使用

                $( "#dialog-confirm0" ).dialog({
        height: 140,
        modal: true
         });

那么你可以在不同的地方使用

                $( "#dialog-confirm1" ).dialog({
        height: 140,
        modal: true
         });

如果你想用css clases做，那么你可以使用jQuery为DIV添加一个不同的类，并添加！important来覆盖来自jQuery UI的样式。

离。

                background-color: #454545 !important;
                color: #000 !important;

jQuery对话框 - 如何为每个对话框使用不同的样式？

2 个答案: