How to change the width of popup after initialization?

I set the width of the popup as auto when initialized in JQUERY script file which is shared with several pages on my website:


 $("#modal-dialog").dialog({
        autoOpen: false,
        modal: true,
        resizeable: false,
        position: { my: 'top', at: 'top+100' },
        height: 'auto',
        width: 'auto',
        buttons: {
            Close: function () {
                $(this).dialog("close");
            }
        },
        show: {
            effect: "drop",
            duration: 400,
            direction: "up"
        },
        hide: {
            effect: "drop",
            duration: 400,
            direction: "down"
        }
    });

And on a particular page I put the following code in the HTML. I am filling the contents in the server code

  <div id="modal-dialog" title="">

                                <div id="dialogContent" runat="server" clientidmode="Static">

                                    </div>

                                    </div>

    

                          

Now try as I may to resize the width it wouldn't work.

 var dialogW = $(window).width() * 0.7;
                        $("#modal-dialog").css("width", dialogW);
                     
                     
However all I needed to do was add this line and it worked:

  $("#dialogContent").css("width", dialogW);
                   
Which means that you need to re-size the content in order to re-size the popup. This way your popup can be of different widths on different pages.