当模式设置为 TRUE 时 jQuery UI 对话框出现问题

发布于 2024-08-23 01:42:24 字数 2613 浏览 10 评论 0原文

我正在使用 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>

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

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

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

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

你怎么认为？

原文

I'm developing an ASP.NET WebForm application with Visual Studio 2008 SP1 and C#.

I have the following ASPX page:

<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>

When modal is set to true the page stars to grow (I know that because both scroll bars are getting smaller, vertical bar faster than horizontal bar).

Looking inside page source code I see that the following div is outside forms tag:

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

If I set modal to false, the error doesn't happen. I think the problem is that the div working as modal is outside the form.

What do you think?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蘑菇王子 2024-08-30 01:42:24

设置这个样式就可以解决问题

<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>

Set this style it will solve the issue

<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>

回复收藏 0 原文

你在看孤独的风景 2024-08-30 01:42:24

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

回复收藏 0 原文

無心 2024-08-30 01:42:24

发现这个在 IE 8 此处中为我解决了这个问题：

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

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

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

Found this that fixed it for me in IE 8 here :

"The changing of the position CSS property for class .ui-widget-overlay from absolute to fixed corrected the scroll bar issue for us but caused a memory bleed and hanging in IE 6. I found a work around for this by doing the following in a CSS file:

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

The first entry is used to correct the scroll bar issue in IE 8 and works fab. The second entry with the "_" is picked up in IE 6 only and sets the position back to absolute as we never had a scroll bar issue in IE 6.

回复收藏 0 原文

滿滿的愛 2024-08-30 01:42:24

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

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

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

Try doing this in the dialog's close event (before the dialog destroy()s the overlay):

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

I think it has something to do with the fact that the jQuery UI overlay object reuses the DIV rather than deleting it.

回复收藏 0 原文

~没有更多了~

关于作者

泪之魂

暂无简介

文章

25 人气

关注发私信

友情链接

文江博客

当模式设置为 TRUE 时 jQuery UI 对话框出现问题

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

Promise

qq_lbRlsh

待＂谢繁草

yy2010hell

漫无边际

傲娇萝莉攻

友情链接

当模式设置为 TRUE 时 jQuery UI 对话框出现问题

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

Promise

qq_lbRlsh

待＂谢繁草

yy2010hell

漫无边际

傲娇萝莉攻

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。