title: jquery-ui dialog, how to apply css on the outmost div on the dialog window only?
body: <p>I am using <a href="http://jqueryui.com" rel="nofollow">jquery-ui</a> to create a dialog window. the div to be shown on the dialog has the class 'dialog'. </p>
  
  <p>Let us look at the html first :</p>
  
  <pre><code>&lt;div class="click_me"&gt;
  Click Me
  &lt;/div&gt;&lt;!-- end of class click_me--&gt;
  
  
  &lt;div class="dialog"&gt;
  
  this is my dialog
  
  &lt;/div&gt;
  </code></pre>
  
  <p>css and javascript follow:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
  .click_me{
      width:120px;
      border:1px solid red;
      text-align:center;
  
      }
  
  
  .dialog{
  
      width:230px;
      border:1px solid green;
      text-align:center;
  
  
      }   
  
  &lt;/style&gt;
  
  &lt;script type="text/javascript" src="js/jquery-1.7.1.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"&gt;&lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function(){
  
  $(".click_me").click(function(){
  
      dialog_my=  $(".dialog").clone(false);
      dialog_my.dialog();
      $(".dialog",     dialog_my ).css('width','450px');
  
  
      }
  
  
  );  
  
  
      });
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>But the line    <code>$(".dialog", dialog_my ).css('width','450px');</code> has no effect. If I omit the context and write the code as <code>$(".dialog" ).css('width','450px');</code> , then the css is applied both on the flat webpage and on the modal window.</p>
  
  <p>How can I apply the  css only on the modal window?</p>