jquery-ui dialog, how to apply css on the outmost div on the dialog window only?

Question

I am using jquery-ui to create a dialog window. the div to be shown on the dialog has the class 'dialog'.

Let us look at the html first :

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


<div class="dialog">

this is my dialog

</div>

css and javascript follow:

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

But the line $(".dialog", dialog_my ).css('width','450px'); has no effect. If I omit the context and write the code as $(".dialog" ).css('width','450px'); , then the css is applied both on the flat webpage and on the modal window.

How can I apply the css only on the modal window?

Answer 1

如果只想给对话框增加一些宽度，则可以使用以下方法：

dialog_my.dialog({width:450});

Answer 2

You are trying to find a div with class dialog in dialog_my which is your div. Just put :

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

Or even better, with chaining methods:

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

Answer 3

jQuery UI adds various classes to your DOM elements to make your .dialog() -call work. You can use this to style just the elements that you want.

With css :

.ui-dialog {
  width: 450px;
}

Or Javascript :

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

The Theming tab of the official plugin description shows you more things you can modify.