Диалог скрыт за оверлеем, когда модальный: true в JQuery Dialog в ASP.net

Я разрабатываю несколько диалоговых окон Jquery и обнаружил, что диалог был скрыт, когда я установил Modal: true. Установив Modal: false, я обнаружил, что все работает так, как ожидалось. Надеюсь, кто-то может мне помочь.

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

Ответы

Ответ 1

Я исправил его. Не так много людей, которые жалуются на эту проблему. Это только я? Во всяком случае, вот как я его исправил. Довольно просто, когда вы знаете, как это сделать.

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

Ответ 2

Вам нужно прекратить использование appendTo, как это, и использовать новый параметр диалога "appendTo"

вот так:

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

Взято из документации jquery-ui http://api.jqueryui.com/dialog/#option-appendTo

Ответ 3

Я попробовал принятый ответ и, похоже, работал в некоторых ситуациях, но не в других. Используя ту же идею, это код, который я придумал с этим кодом...

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

..., который основан на том, что z-индекс .ui-widget-overlay равен 9998.

Кроме того, чтобы устранить проблему, когда наложение не покрывает всю высоту вашей страницы (поскольку .ui-widget-overlay имеет только высоту 1000%), я придумал следующее:

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

Ответ 4

Все, что мне нужно, было z-index:1, примененное к ui-dialog. Не было z-index, которое я мог бы применить к ui-widget-overlay, чтобы сделать эту работу.

Я делаю это в Wordpress, включая скрипты jquery, jquery-ui-core, jquery-ui-dialog. Здесь мои соответствующие css:

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

Ответ 5

Можете ли вы создать jsFiddle, чтобы воссоздать эту проблему за пределами вашей среды? Если нет, вот некоторые идеи с головы:

Поместите свой javascript внутри готового блока документа, например:

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

Измените btnOpendialog как серверный элемент управления nonASP.NET. Поскольку все, что он делает, открывает диалоговое окно jquery, ему не нужно быть управляющим сервером. Измените его так:

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