Jquery Modal Dialog désactive les éléments de formulaire

Question

Lorsque je règle ma boîte de dialogue jQuery sur model = true, elle désactive mes éléments de formulaire dans la boîte de dialogue et je ne peux pas les utiliser, seuls les boutons. J'ai vu des exemples où le contenu de la boîte de dialogue est déclaré dans le script d'initiation de la boîte de dialogue puis injecté. mais c'est juste encombrant pour moi, je veux pouvoir créer mon balisage à l'intérieur de la DIV que je transforme en un dialogue.

Quelqu'un at-il une solution pour moi?

Mon code:

<form id="form1" runat="server"> 
<div class="dlg" id="msgDlg">  
    Name: <input type="text" /> 
    <br /> 
    <input type="button" class="button" value="OK" onclick="$('#msgDlg').dialog('close');" />  
</div> 
    <script> 
     function InitMessageDialog(dialogId) { 
      $(function() { 
       jQuery("#" + dialogId).dialog({ 
        autoOpen: false, 
        modal: false, 
        width: 450, 
        height: 300, 
        draggable: true, 
        resizable: true, 
        zIndex: 99999, 
        overlay: { backgroundColor: "#000", opacity: 0.5 }, 
        open: function (type, data) { 
         $(this).parent().appendTo('#form'); 
        } 
       }); 
      }) 
     } 
     function GoDialog() { 
      var msgDlg = $('#msgDlg').dialog('open'); 
     } 
     InitMessageDialog('msgDlg'); 
    </script> 
    <input type="button" class="button" value="go dialog" onclick="GoDialog()" /> 
</form> 
 

Answer 1

Le z-index de la forme est très probablement le problème. Essayez de le régler sur "auto":

#my_dialog_form { 
    z-index: auto; 
}