Modale jQuery dialogue caché derrière superposition ASP.net

Je suis en train d'élaborer certains Jquery dialogue et trouvé la boîte de dialogue a été caché lorsque j'ai mis en Modal: true. Lors de la configuration Modale: faux, j'ai trouvé que tout fonctionne comme prévu. J'espère que quelqu'un pourra m'aider.

<asp:Button ID="btnOpendialog" runat="server" Text="Button" ClientIDMode="Static" />

<div id="dialog">

<h1>Test</h1>
    <asp:Button ID="btnClickfromDialog" runat="server" Text="Button" />

</div>

$(function () {
    $("#btnOpendialog").click(function (e) {
        $("#dialog").dialog("open");
        return false;
    });

    $("#dialog").dialog({
        height: 200,
        modal: true,
        autoOpen: false,
        open: function () {
            $(this).parent().appendTo($("form:first"));
        }                              
    });
});
InformationsquelleAutor lawphotog | 2013-04-23
  1. 15

    Je l'ai corrigé. Il n'y a pas beaucoup de gens qui s'intéressent et se plaindre de ce problème. Est-ce juste moi? De toute façon, voici comment je l'ai corrigé. Assez simple quand vous savez comment.

    .ui-widget-overlay
{
        z-index: 0;   
}
    • Nice one! A travaillé pour moi, bien que j'ai eu à utiliser !Important assurez-vous qu'il ont eu la priorité.
    • pour d'autres personnes à venir à cette page, comme @Eddie R mentionnées, vous devez utiliser la nouvelle API $( ".selector" ).dialog({ appendTo: "#someElem" });
    InformationsquelleAutor lawphotog
  2. 11

    J'ai essayé la accepté de répondre et il est apparu à travailler dans certaines situations, mais pas dans d'autres. En utilisant la même idée, c'est le code que j'ai trouvé ce code...

    .ui-dialog {
    z-index: 9999 !important;
    }

    ...qui est basée sur le fait que le z-index de .ui-widget-overlay est 9998.

    En outre, pour résoudre le problème de la superposition ne couvrent pas la totalité de la hauteur de votre page (comme .ui-widget-overlay seulement a une hauteur de 1000%), je suis venu avec cette:

    .ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    }

    • Les deux remplacements a fonctionné pour moi sur tous les navigateurs - grâce ban-la géo-ingénierie.
    InformationsquelleAutor ban-geoengineering
  3. 6

    Vous devez cesser d'utiliser appendTo comme cela et utiliser la boîte de dialogue nouvelle option "appendTo"

    comme ceci:

    $( ".selector" ).dialog({ appendTo: "#someElem" });

    Prises de jquery-ui documentation
    http://api.jqueryui.com/dialog/#option-appendTo

    InformationsquelleAutor Eddie Rozenblat
  4. 3

    Tout ce que je besoin est z-index:1 appliquée à ui-dialog. Il n'y a pas de z-index je pourrais demander à ui-widget-overlay pour faire ce travail.

    Je fais cela dans WordPress, y compris le 'jquery', 'jquery-ui-core', 'jquery-ui-dialog' scripts. Voici mon css adéquat:

    .ui-widget-overlay {    
    position: absolute; 
    top: 0; 
    left: 0; 
    width:100%;
    height:100%;
    background: #aaaaaa;
    opacity: 0.3;  
}    

.ui-dialog {    
    background-color: #FFFFFF;    
    overflow: hidden;   
    z-index:1;
}
    InformationsquelleAutor AlexJ
  5. -1

    Pouvez-vous créer un jsFiddle pour recréer cette question en dehors de votre environnement? Si pas, ici sont quelques idées sur le dessus de ma tête:

    Mettre votre code javascript à l'intérieur d'un document prêt à bloc, comme suit:

    $(document).ready(function() {
//Your javascript here...
});

    Changement btnOpendialog être un non-ASP.NET contrôle de serveur. Car tout cela n'est d'ouvrir le dialogue jquery, il n'a pas besoin d'être un serveur de contrôle. Changer à cela:

    <input type="button" id="btnOpendialog" value="Button" />
    • $(function () { est le même que $(document).prêt Clair .. il ne serait pas faire une différence pour changer le bouton tout cas, j'ai besoin d'asp.net des boutons. Merci pour votre aide. Je fixe déjà.
    InformationsquelleAutor ClearCloud8