Issue with jQuery UI Dialog when modal is set to TRUE

StackOverflow https://stackoverflow.com/questions/2350522

  •  23-09-2019
  •  | 
  •  

Question

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?

Was it helpful?

Solution

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>

OTHER TIPS

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

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.

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top