Question

如何使jquery对话框仅覆盖用户控件而不是整个页面..任何想法？

想象一下，我在用户控件（.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>

现在，问题是当加载用户控件时，模态（覆盖）覆盖了整个页面。我希望它只覆盖用户控件，这样用户仍然可以与页面上的其他控件进行交互。

Answer 1

如果您只想阻止页面的某个部分，请不要使用模态，请手动执行。在div中包含要禁用的页面部分，并在对话框的打开和关闭事件中添加/删除叠加层。

$("#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();
    }        
});

在上面的代码中，'.coverme'是选择器，用于选择要调暗和阻止的页面部分。确保将容器的position css属性设置为relative或absolute（除静态外），否则叠加将填充整个页面。

查看http://jsfiddle.net/DBd36/

Answer 2

jQuery UI的dialog允许您specify a position，因此您可以将其放置在任何您想要的位置，包括“在用户控件上”：

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

jquery对话框和用户控件

2 个答案: