jquery 对话框和用户控件答案

【问题标题】：jquery dialog and user controljquery 对话框和用户控件
【发布时间】：2011-08-11 09:12:03
【问题描述】：

如何让 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>

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

【问题讨论】：

我有一个用户控件，在该用户控件中我有一个实现 jquery UI 对话框的 javascript。现在，当模式设置为 true 并覆盖整个页面时。我如何让它只覆盖在用户控件上？
@user384080 - 你能发布你的代码吗？没有它，就很难说出你到底在使用什么以及你是如何使用它的。
如何在此处发布我的代码？它没有上传文件的功能..
复制并粘贴相关部分。使用编辑器上的{} 按钮使其正确显示。

标签： jquery asp.net jquery-ui jquery-ui-dialog

【解决方案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 属性设置为相对或绝对（静态除外），否则覆盖将填满整个页面。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：