jquery dialog and user control

How do i make the jquery dial开发者_JAVA技巧og to cover only on the user control not the entire page.. any ideas?

Imagine that i have this script on the user control (.ascx)

<script type="text/javascript">
    $(document).ready(function () {
        $("#popup").dialog({ closeOnEscape: false, draggable: false, modal: true, 
                                resizable: false, closeText: 'hide' });

    $.ajax({
            type: "POST",
            dataType: "xml",
            contentType: "application/json; charset=utf-8",
            url: "Service2.svc/DoWork",
            data: "{}",
            processdata: true, //True or False
            success: function (response, textStatus, jqXHR) {
                $("#popup").dialog('close');

            },
            error: function () {
                $("#popup").dialog('close');
                alert("error");
            }
        });
});

</script>

<div id="popup" style="display:none">
Loading contents... 
</div>

Now, the problem is when the user control is loaded the modal (overlay) covers the entire page. I want it to cover just on the user control only so the user is still be able to interact with the other controls on the page.

If you only want to block a certain part of the page, don't use modal, do it manually. Wrap the part of the page you want to disable in a div, and add/remove the overlay in the dialog's open and close events.

$("#popup").dialog({
    closeOnEscape: false,
    draggable: false,
    modal: false,
    resizable: false,
    closeText: 'hide',
    open: function(){
        $('.coverme').append('<div class="ui-widget-overlay"></div>');
    },
    close: function(){
        $('.coverme').find('.ui-widget-overlay').remove();
    }        
});

In the code above, '.coverme' is the selector which selects the parts of the page you want to dim and block. Make sure that you set the containers' position css property to relative or absolute (anything but static), otherwise the overlay will fill the whole page.

Have a look at http://jsfiddle.net/DBd36/

jQuery UI's dialog allows you to specify a position, so you can position it wherever you want, including "on the user control":

$( ".selector" ).dialog({ position: [10, 200], height: 300, width: 300 });