views:

634

answers:

2

Hello!

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?

+1  A: 

I think you are right, the overlay is to fade out the rest of the page, but as you see just go in to whateer theme you are using and you could probably hack the ui-widget-overlay class to not grow as much, must say it looks very strange with the 65089 pixels height. you could try to set the max-height to maybe 100%.

cjensen
The problem is that I don't have any theme attach to aspx page.
VansFannel
Now, that is a jQuery theme not an aspx theme. Regardless, add the classes to your css (or inline) and adjust it and you should be good to go.
cjensen
A: 

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.

cristian