asp.net - Problema con el cuadro de diálogo de jQuery UI cuando modal se establece en TRUE
webforms jquery-dialog (4)
Estoy desarrollando una aplicación ASP.NET WebForm con Visual Studio 2008 SP1 y C #.
Tengo la siguiente página 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>
Cuando modal se establece en verdadero, la página se expande (lo sé porque las dos barras de desplazamiento son cada vez más pequeñas, la barra vertical es más rápida que la barra horizontal).
Al mirar dentro del código fuente de la página, veo que el siguiente div está fuera de la etiqueta de formularios:
<div class="ui-widget-overlay" style="z-index: 1001; width: 1280px; height: 65089px;" jQuery1267345392312="20"/>
Si configuro modal en falso, el error no ocurre. Creo que el problema es que el div que funciona como modal está fuera de la forma.
¿Qué piensas?
Creo que tienes razón, la superposición se desvanece en el resto de la página, pero como ves, ve al tema de Whateer que estás usando y probablemente puedas piratear la clase ui-widget-overlay para que no crezca tanto, debe dicen que se ve muy extraño con la altura de 65089 píxeles. podrías intentar establecer la altura máxima tal vez en un 100%.
Encontré esto que me lo arregló en IE 8 aquí :
"El cambio de la posición de la propiedad CSS para la clase .ui-widget-overlay de absoluto a fijo corrigió el problema de la barra de desplazamiento para nosotros, pero causó una pérdida de memoria y bloqueo en IE 6. Encontré un trabajo para esto haciendo lo siguiente en un archivo CSS:
.ui-widget-overlay { position: fixed; }
.ui-widget-overlay { _position: absolute; }
La primera entrada se usa para corregir el problema de la barra de desplazamiento en IE 8 y funciona fab. La segunda entrada con la "_" se recoge en IE 6 solamente y establece la posición de nuevo en absoluta ya que nunca tuvimos un problema de barra de desplazamiento en IE 6.
Establecer este estilo solucionará el problema
<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>
Intente hacer esto en el evento close del diálogo (antes de que el diálogo destroy()s la superposición):
div.data(''dialog'').overlay.$el.css({height: 0, width: 0});
Creo que tiene algo que ver con el hecho de que el objeto de superposición jQuery UI reutiliza el DIV en lugar de eliminarlo.