Problème avec jQuery UI Dialog lorsque modal est défini sur TRUE

Je développe une application ASP.NET WebForm avec Visual Studio 2008 SP1 et C#.Problème avec jQuery UI Dialog lorsque modal est défini sur TRUE

J'ai la page ASPX suivante:

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

Lorsque modal est défini sur true la page étoiles à croître (je sais que parce que les deux barres de défilement deviennent plus petits, une barre verticale plus rapide que la barre horizontale).

regardant à l'intérieur du code source de la page, je vois que la div suivante est balise formes à l'extérieur:

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

Si je mets modal false, l'erreur ne se produit pas. Je pense que le problème est que la div fonctionnant comme modal est en dehors de la forme.

Qu'en pensez-vous?

Source

2010-02-28 VansFannel

Set ce style, il résoudra la question

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

Source

2011-04-26 18:10:52 vijendra

Je pense que vous avez raison, la superposition consiste à fondre le reste de la page, mais comme vous le voyez, allez dans le thème que vous utilisez et vous pourriez probablement pirater la classe ui-widget-overlay pour ne pas croître autant, il faut dire qu'il a l'air très étrange avec la hauteur de 65089 pixels. vous pourriez essayer de définir la hauteur maximale à peut-être 100%.

Source

2010-02-28 08:42:16 cjensen

Le problème est que je n'ai aucun thème attacher à page aspx. – VansFannel

Maintenant, c'est un thème jQuery pas un thème aspx. Peu importe, ajoutez les classes à votre css (ou en ligne) et ajustez-le et vous devriez être bon à faire. – cjensen

Essayez de faire cela dans l'événement près de la boîte de dialogue (avant la destroy()s boîte de dialogue de la superposition):

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

Je pense qu'il a quelque chose à voir avec le fait que l'objet de superposition jQuery UI réutilise la DIV plutôt que de supprimer il.

Source

2010-04-10 04:14:30 cristian

trouvé ce qui me fixe pour IE 8 here:

« Le changement de la propriété CSS position pour la classe .ui-widget- superposition d'absolue fixe corrigé le problème de barre de défilement pour nous, mais a provoqué une hémorragie de mémoire et suspendu dans IE 6. J'ai trouvé un travail autour de cela en procédant comme suit dans un fichier CSS:

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

La première entrée est utilisée pour corriger le problème de barre de défilement dans IE 8 et fonctionne fab. La deuxième entrée avec le "_" est ramassé dans IE 6 seulement et remet la position à absolu comme nous n'avons jamais eu un problème de barre de défilement dans IE 6.

Source

2011-11-08 18:10:35 Mel

Problème avec jQuery UI Dialog lorsque modal est défini sur TRUE

Répondre

Questions connexes