jQuery UI Dialog problem if modal is set to TRUE

Posted by VansFannel on Stack Overflow See other posts from Stack Overflow or by VansFannel
Published on 2010-02-28T08:32:11Z Indexed on 2010/04/10 4:23 UTC
Read the original article Hit count: 487

Filed under:

ASP.NET

|

webform

|

jquery-dialog

|

c#

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?

Developer IT