JQuery UI 1.8.2ダイアログをカバーするオーバーレイ

Question

JSFページでjQuery UIモーダルダイアログを使用していますが、これもダイアログのdiv内にプライムフェイスコンポーネントがあります。モーダルプロパティをtrueに設定すると、オーバーレイはダイアログコンテンツも覆い隠します。ここに私のダイアログ定義は次のとおりです。

if (jQuery("#rangeChoice").val() == 'Custom') {  
    jQuery("#rangeDialog").dialog({ 
    modal: true, 
    draggable: false, 
    minHeight: 375, minWidth: 450, 
    resizable: false, 
    title: 'Create Custom Date Range', 
    closeOnEscape: false, 
    open: function(event, ui) { jQuery(".ui-dialog-titlebar-close").hide(); } 
    }); 
return; 
} 

とdivのための私のコンテンツ：

<div id="rangeDialog" style="display: none;"> 
<div class="customRangeButtons" style="z-index: 4999;"> 
    <!-- Clipped for brevity, the buttons alone are covered by the overlay --> 
    <span> 
     <p:commandButton value="Cancel" actionListener="#{bean.cancelCDR}" update="pGraphs"/> 
    </span> 
    <span style="margin-left: 300px;"> 
     <p:commandButton value="Submit" type="submit" action="#{bean.saveCDR()}" update="pGraphs"/> 
    </span> 
</div>  

私はPrimefaces 2.2.1を使用しています、と私は制御している人に関連した感覚を持っていますオーバーレイdiv。私はページに自分のオーバーレイdivを追加して、非モーダルダイアログのオープンイベントでそれを表示しようとしました。また、z-index値> 3のダイアログもカバーしました。値1と2は、ページ上の他のコントロールがそれを上回っていても問題ありませんでした。これは、p：dialogを使用してactionListenerを起動させなかったための回避策です。

他に何を試すことができますか？

Answer 1

divタグのZインデックスが.dialogによってオーバーライドされています。 .dialogのデフォルトのz-indexが1000です。あなたがそうのようなzIndexオプションを変更してダイアログを作成するときは、これを変更することができます http://jqueryui.com/demos/dialog/

：

jQuery("#rangeDialog").dialog({ 
    modal: true, 
    draggable: false, 
    minHeight: 375, minWidth: 450, 
    resizable: false, 
    title: 'Create Custom Date Range', 
    closeOnEscape: false, 
    open: function(event, ui) { jQuery(".ui-dialog-titlebar-close").hide(); }, 
    zIndex: 4999 
    }); 

は、詳細はドキュメントのオプション]タブを参照してください。