4

我正在使用 Visual Studio 2008 SP1 和 C# 开发一个 ASP.NET WebForm 应用程序。

我有以下 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>

当 modal 设置为 true 时，页面星星会增长（我知道因为两个滚动条都越来越小，垂直条比水平条快）。

查看页面源代码内部，我看到以下 div 在表单标记之外：

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

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

你怎么看？

4

4 回答 4

2

设置此样式将解决问题

<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>
于 2011-04-26T18:10:52.557 回答
1

我认为你是对的，叠加层是为了淡出页面的其余部分，但是正如你所看到的，只要进入你正在使用的任何主题，你可能会破解 ui-widget-overlay 类以不增长太多，必须说 65089 像素的高度看起来很奇怪。您可以尝试将最大高度设置为 100%。

于 2010-02-28T08:42:16.130 回答
1

在这里找到了在 IE 8 中为我修复的问题：

“将 .ui-widget-overlay 类的位置 CSS 属性从绝对更改为固定为我们纠正了滚动条问题，但导致内存溢出并在 IE 6 中挂起。我通过执行以下操作找到了解决此问题的方法一个 CSS 文件：

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

第一个条目用于纠正 IE 8 中的滚动条问题，并且可以正常工作。带有“_”的第二个条目仅在 IE 6 中被拾取，并将位置设置回绝对位置，因为我们在 IE 6 中从未遇到过滚动条问题。

于 2011-11-08T18:10:35.430 回答
0

尝试在对话框的关闭事件中执行此操作（在对话框destroy()s覆盖之前）：

div.data('dialog').overlay.$el.css({height: 0, width: 0});

我认为这与 jQuery UI 覆盖对象重用 DIV 而不是删除它有关。

于 2010-04-10T04:14:30.347 回答