All geek questions in one place

Problem with jQuery UI dialog if modal value set to TRUE

I am 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 the modal value is true, the pages grow (I know that as scrollbars become smaller, the vertical bar is faster than the horizontal bar).

Entering the source code of the page, I see that the following div is outside the form tag:

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

If modal is false, no error will occur. I think the problem is that a div that works as a modal goes beyond the scope of the form.

What do you think?

+4
source share
4 answers

Set this style to solve the problem.

 <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>
+2
source

I think you're right, the overlay is the fading out of the rest of the page, but as you can see, just enter the theme you are using and you can probably hack the ui-widget-overlay class so you don't grow as much I must say that it looks very strange with a height of 65089 pixels. you can try to set the maximum height, maybe 100%.

+1
source

Found this to be fixed for me in IE 8 here :

"Changing the CSS property of the position for the .ui-widget-overlay class from absolute to fixed fixed for the scroll bar for us, but caused a memory leak and freeze in IE 6. I found work for this by executing in the CSS file:

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

The first entry is used to fix the scroll problem in IE 8 and fab works. The second entry with "_" is selected only in IE 6 and sets the position back to absolute, since in IE 6 there has never been a problem with the scroll bar.

+1
source

Try this in the close event of the dialog box (before the destroy()s overlay dialog):

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

I think this is because the jQuery UI overlay object reuses the DIV rather than deleting it.

0
source

Source: https://habr.com/ru/post/1302649/

More articles:


All Articles