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對話框 - 如何爲每個對話框使用不同的樣式？

回答

相關問題