Asp.net 当model设置为TRUE时，jQuery UI对话框出现问题_Asp.net_Webforms_Jquery Dialog

Asp.net 当model设置为TRUE时，jQuery UI对话框出现问题

asp.net

Asp.net 当model设置为TRUE时，jQuery UI对话框出现问题,asp.net,webforms,jquery-dialog,Asp.net,Webforms,Jquery Dialog,我正在用VisualStudio2008SP1和C#开发一个ASP.NETWebForm应用程序我有以下ASPX页面： <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> <script src="js/jquery-1.3.2.min.js" type="text/javascript"></scr

我正在用VisualStudio2008SP1和C#开发一个ASP.NETWebForm应用程序

我有以下ASPX页面：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#dialog").dialog({
                autoOpen: false,
                modal: true,
                buttons: {
                    'Ok': function() {
                        __doPostBack('TreeNew', '');
                        $(this).dialog('close');
                    },
                    Cancel: function() {
                        $(this).dialog('close');
                    }
                },
                close: function() {
                },
                open: function(type, data) {
                    $(this).parent().appendTo("form");
                }
            });
        });
        function ShowDialog() {
            $('#dialog').dialog('open');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="TreeNew" runat="server" Text="Nuevo" 
            OnClientClick="ShowDialog();return false;" onclick="TreeNew_Click"/>
        <asp:Label ID="Message" runat="server"></asp:Label>
        <div id="dialog_target"></div>
        <div id="dialog" title="Select content type">
            <p id="validateTips">All form fields are required.</p>
            <asp:RadioButtonList ID="ContentTypeList" runat="server">
                <asp:ListItem Value="1">Text</asp:ListItem>
                <asp:ListItem Value="2">Image</asp:ListItem>
                <asp:ListItem Value="3">Audio</asp:ListItem>
                <asp:ListItem Value="4">Video</asp:ListItem>
        </asp:RadioButtonList>
        </div>
    </div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    </form>
</body>
</html>


$（文档）.ready（函数（）{
$（“#对话框”）。对话框({
自动打开：错误，
莫代尔：是的，
按钮：{
“确定”：函数（）{
__doPostBack（'TreeNew'，''）；
$（this.dialog（'close'）；
},
取消：函数（）{
$（this.dialog（'close'）；
}
},
关闭：函数（）{
},
打开：功能（类型、数据）{
$（this.parent（）.appendTo（“form”）；
}
});
});
函数ShowDialog（）{
$（'dialog'）。dialog（'open'）；
}
所有表单字段都是必需的
正文
形象
音频
视频

当model设置为true时，页面开始增长（我知道因为两个滚动条都变小了，垂直条比水平条快）

查看页面源代码内部，我看到以下div位于forms标记外部：

<div class="ui-widget-overlay" style="z-index: 1001; width: 1280px; height: 65089px;" jQuery1267345392312="20"/>

如果将modal设置为false，则不会发生错误。我认为问题在于作为模态的div在表单之外

你怎么看？

我认为你是对的，覆盖层会淡出页面的其余部分，但正如你所看到的，只需进入你正在使用的主题，你可能会攻击ui小部件覆盖层类，使其不会增长那么多，必须说它看起来非常奇怪，高度为65089像素。您可以尝试将最大高度设置为100%。

尝试在对话框的关闭事件中执行此操作（在对话框

destroy（）s

覆盖之前）：

我认为这与jQuery UI overlay对象重用DIV而不是删除DIV这一事实有关。

设置此样式将解决此问题

<style type="text/css"> 

.ui-widget-overlay   
{   
    background-color: #000000;   
    left: 0;   
    opacity: 0.5;   
    position: absolute;   
    top: 0;   
}   

.ui-dialog   
{   
    background-color: #FFFFFF;   
    border: 1px solid #505050;   
    position: absolute;   
    overflow: hidden;   
} 


</style>


.ui小部件覆盖
{   
背景色：#000000；
左：0；
不透明度：0.5；
位置：绝对位置；
排名：0；
}   
.ui对话框
{   
背景色：#FFFFFF；
边框：1px实心#505050；
位置：绝对位置；
溢出：隐藏；
}

在IE 8中为我找到了修复它的方法：

“将class.ui小部件覆盖的position CSS属性从absolute更改为fixed为我们纠正了滚动条问题，但在IE 6中导致内存溢出和挂起。我通过在CSS文件中执行以下操作找到了解决方法：

.ui-widget-overlay { position: fixed; } 
.ui-widget-overlay { _position: absolute; }

第一个条目用于纠正IE 8和works fab中的滚动条问题。第二个条目带有“_“仅在IE 6中拾取，并将位置设置回绝对位置，因为我们在IE 6中从未出现过滚动条问题。

问题在于我没有任何主题附加到aspx页面。现在，这是一个jQuery主题而不是aspx主题。不管怎样，将这些类添加到css（或内联）中并进行调整，就可以开始了。

.ui-widget-overlay { position: fixed; } 
.ui-widget-overlay { _position: absolute; }