2

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

例如，像“真正删除......”这样的警报应该与其他消息有不同的风格......

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

<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>.

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

4

2 回答 2

2

也直接来自 jQuery 站点：

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

它说

指定的类名将添加到对话框中，以进行其他主题化。

于 2012-07-23T20:53:40.540 回答
0 
         <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 类来做，那么你可以使用 jQuery 向 DIV 添加一个不同的类，并添加 !important 来覆盖来自 jQuery UI 的样式。

前任。

                background-color: #454545 !important;
                color: #000 !important;
于 2012-07-23T20:50:58.840 回答