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

我使用jQuery UI对话框来浏览网站上的不同对话框。现在我想知道是否有一种简单的方法为不同的对话框使用不同的样式？jQuery对话框 - 如何为每个对话框使用不同的样式？

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

什么是可以有不同的对话框不同风格的最佳方式是什么？

来源

2012-07-23 Helmut

也可以直接从jQuery网站：

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

它说

指定的类名（S）将被添加到该对话框中，额外的主题化。

来源

2012-07-23 20:53:40 Chris

  <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的样式。

ex。

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

来源

2012-07-23 20:50:58

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

回答

相关问题