La finestra di dialogo era nascosta dietro la sovrapposizione quando Modale: true nella finestra di dialogo Jquery in ASP.net

Question

Sto sviluppando una finestra di dialogo Jquery e ho trovato che la finestra di dialogo era nascosta quando ho impostato Modal: true. Quando si imposta Modal: false, ho trovato che tutto funziona come previsto. Spero che qualcuno possa aiutarmi.

<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")); 
     }        
    }); 
}); 

Answer 1

Ho risolto. Non ci sono molte persone che si lamentano di questo problema. Sono solo io? Ad ogni modo, ecco come l'ho risolto. Abbastanza semplice quando sai come.

.ui-widget-overlay 
{ 
     z-index: 0; 
} 

Answer 2

È possibile creare un jsFiddle per ricreare questo problema al di fuori del proprio ambiente? In caso contrario, ecco alcune idee al largo della parte superiore della mia testa:

Metti il ​​tuo javascript all'interno di un blocco pronto documento, in questo modo:

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

Change btnOpendialog per essere un controllo server non-ASP.NET . Poiché tutto ciò che fa è aprire la finestra di dialogo jquery, non ha bisogno di essere un controllo server. Cambiare a questo:

<input type="button" id="btnOpendialog" value="Button" /> 

Answer 3

È necessario smettere di usare appendTo come questo e utilizzare la nuova opzione di dialogo "appendTo"

come questo:

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

Tratto da documentazione jQuery-ui http://api.jqueryui.com/dialog/#option-appendTo

Answer 4

Ho provato la risposta accettata e sembrava funzionare in alcune situazioni, ma non in altre. Utilizzando la stessa idea, questo è il codice mi si avvicinò con questo codice ...

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

... che si basa sul fatto che lo z-index di .ui-widget-overlay è 9998.

Inoltre, per risolvere il problema in cui la sovrapposizione non copre l'intera altezza della pagina (come .ui-widget-overlay ha solo un'altezza di 1000%), sono arrivato fino a questo:

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

Answer 5

All I era necessario z-index:1 applicato a ui-dialog. Non c'era z-index Potrei applicare a ui-widget-overlay per fare questo lavoro.

Lo sto facendo in Wordpress inclusi gli script 'jquery', 'jquery-ui-core', 'jquery-ui-dialog'. Ecco il mio css rilevanti:

.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; 
}