3

AJAX をロードした Fancybox ウィンドウ内でjQuery ダイアログを開こうとしています。

Fancybox コンテンツには、次のスクリプトがあります。

$('#firma_picker').load( $('#firma_opener').attr('href') );
$('#firma_picker').dialog({
                autoOpen: false,
                title: 'Výber firmy',
                width: 300,
                height: 400,
                modal: false,
                draggable: false,
                resizable: false
            });



$('#firma_opener').click(function() {
            $('#firma_picker').dialog('open');
            $('#firma_picker').dialog('moveToTop');

            return false;
});

残念ながら、Dialog は常にFancyboxウィンドウの後ろで開かれます。z-index設定をセレクターに変更してみまし.ui-dialogたが、うまくいきません。私は「firma_picker」DIVに同じことをしました。

私には、Dialog DIV コードが常に body に追加されているように思えます。だから私は Fancybox 内の要素にコンテンツを追加する appendTo ディレクティブを試しましたが、これはまったく機能せず、Dilog は常に本文に追加されます。

この HTML にコードが適用されます。

<div>
        <label>Firma:</label><input type="text" name="nadpis" style="width: 325px; height: 14px;" placeholder="Kliknite na ikonu vyhľadávania vpravo" />
        <a id="firma_opener" href="<?php echo $this->baseUrl; ?>/admin/reklama/firmasearch"><img src="" alt="ikona vyhľadávania" /></a> <-- tu je ikona
        <div id="firma_picker"></div>
</div>

これを解決するために最近数時間を費やしましたが、これ以上の手がかりはありません。何か案は ？ありがとうございました。イヴァン

PS: datepicker は Fancybox ウィンドウ内で正常に動作しています。

4

1 に答える 1

6

fancyboxコンテナには次のz-index値があります。

.fancybox-overlay {
  z-index : 8010;
}

.fancybox-opened {
  z-index : 8030;
}

z-indexUIダイアログのデフォルト（ .ui-dialog）は1002

z-index次のように、ファンシーボックスセレクターよりも高いセレクターをUIダイアログセレクターに設定してみてください。

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

...重要なことに注意して!importantください;）

JSFIDDLEを参照してください

于 2013-02-15T17:59:33.227 に答える