jquery-uiダイアログ、ダイアログウィンドウの外のdivにのみCSSを適用するには？

Question

私はjquery-uiを使用してダイアログウィンドウを作成しています。ダイアログに表示されるdivにはクラス 'dialog'があります。

私たちが最初のHTMLを見てみましょう：

<div class="click_me"> 
Click Me 
</div><!-- end of class click_me--> 


<div class="dialog"> 

this is my dialog 

</div> 

CSSやJavaScriptのフォロー：

<style type="text/css"> 

.click_me{ 
    width:120px; 
    border:1px solid red; 
    text-align:center; 

    } 


.dialog{ 

    width:230px; 
    border:1px solid green; 
    text-align:center; 


    } 

</style> 

<script type="text/javascript" src="js/jquery-1.7.1.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> 


<script type="text/javascript"> 

$(document).ready(function(){ 

$(".click_me").click(function(){ 

    dialog_my= $(".dialog").clone(false); 
    dialog_my.dialog(); 
    $(".dialog",  dialog_my).css('width','450px'); 


    } 


); 


    }); 


</script> 

しかしライン$(".dialog", dialog_my).css('width','450px');は効果がありません。コンテキストを省略してコードを$(".dialog").css('width','450px');と書くと、CSSはフラットなWebページとモーダルウィンドウの両方に適用されます。

モーダルウィンドウでのみCSSを適用できますか？

Answer 1

dialogのdivはdialog_myにあります。は divです。ただ置く：

dialog_my.css('width','450px');

またはより良いを、連鎖する方法で：

 
dialog_my = $(".dialog").clone(false).dialog().css('width','450px'); 

Answer 2

をあなたが唯一のダイアログにいくつかの幅を与えたい場合は、これを使用することができます：

dialog_my.dialog({width:450});

Answer 3

jQuery UIは、DOMエレメントにさまざまなクラスを追加して.dialog()-callを動作させます。これを使用して、必要な要素だけをスタイルすることができます。

.ui-dialog { 
    width: 450px; 
} 

それともJavascriptを：CSSで

$('.ui-dialog').width(450); 

公式plugin descriptionのタブをテーマ設定は、あなたが変更することができますより多くの事を示しています。