web-dev-qa-db-ja.com

ASP.netのオーバーレイの背後に隠されたモーダルjQueryダイアログ

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"));
        }                              
    });
});
jqueryasp.netjquery-uimodal-dialogjquery-ui-dialog
12
lawphotog

それを私が直した。この問題について不満を言っている人はあまりいません。私だけでしょうか？とにかく、これが私がそれを修正した方法です。あなたが方法を知っているときは非常に簡単です。

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

受け入れられた答えを試しましたが、状況によっては機能するように見えましたが、そうでない場合もありました。同じ考えを使用して、これは私がこのコードを思いついたコードです...

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

...これは、.ui-widget-overlayのz-indexが9998であるという事実に基づいています。

さらに、オーバーレイがページの高さ全体をカバーしない問題を修正するために（.ui-widget-overlayの高さは1000%しかないため）、私はこれを思いつきました。

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

11
ban-geoengineering

このようにappendToの使用を停止し、新しいダイアログオプション「appendTo」を使用する必要があります

このような：

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

Jquery-uiドキュメントから取得 http://api.jqueryui.com/dialog/#option-appendTo

6
Eddie Rozenblat

必要なのは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;
}
4
AlexJ