0

ブログで優れたライトボックス効果を見つけましたが、必要な方法で微調整する方法がわかりません。背景opacityとを操作する以外z-indexに、divs css 表示プロパティを「なし」に設定し、効果がトリガーされたときに「ブロック」することで機能します。その div には、jquerymenu()とdialog()メソッドを適用する順序付けられていないリストがあります。ライトボックス効果と ui メソッドは機能しますが、クラス「ホワイト コンテンツ」で指定された div 内でダイアログが開きません。代わりに白いコンテンツの後ろに開きます。スクリプトで dialog() の z-index を変更しようとしましたが、うまくいきませんでした。以下に、ファイルからのコードが.cssあり.htmlます.js。

CSS 

/*Lightbox effect
----------------------------------*/
.black_overlay {
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 2000%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
}
.white_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 100%;
            background-color: white;
            z-index:1002;
            overflow: auto;
}

HTML

<body>

  <div id="light" class="white_content">

<div id="dialog" title="Invite">

<ul class="menu">
    <li>
        <a href="#" id="ageGroup">Age Group</a>
            <ul>
                <li name="ageGroup"><a href="#">18-21</a></li>
                <li name="ageGroup"><a href="#">21-30</a></li>
                <li name="ageGroup"><a href="#">30-40</a></li>
                <li name="ageGroup"><a href="#">40-50</a></li>
                <li name="ageGroup"><a href="#">50-60</a></li>
                <li name="ageGroup"><a href="#">60-70</a></li>
                <li name="ageGroup"><a href="#">70-80</a></li>
                <li name="ageGroup"><a href="#">80-90</a></li>
                <li name="ageGroup"><a href="#">90-100</a></li>
            </ul>

    </li>
    </ul>

    <button>Button label</button>

    </div>
</div>

<div id="fade" class="black_overlay"></div>

</body>

JS

$(function(){

//event handler that triggers lightbox effect 

    $('#list').on('click', '.edit', function(event){

        //this is where the lightbox effect executes. 

        $("#light").css("display", "block");
        $("#fade").css("display", "block");

//I want the dialog and menu to open inside of the div #light

        $("#dialog").dialog();


        $(".menu").menu();// closes $("menu").menu() 


     $( "button" ).button();

     }//closes function(event)

);// closes on()


}); //closes $function.
4

1 に答える 1

1

内で UI ダイアログを開く方法が見つかりませんでした<div>。の子として常に開くように意図的に作られているのかもしれません<body>。jQuery UI サイトでは、ダイアログは 内で実行される<iframe>ため、 内にあると誤解される可能性があります<div>。

私の提案は、jQuery UI コンポーネントをライトボックス内に配置することです。これは、すでにダイアログのようなものです。また、ライトボックスを動かしたい場合は、jQuery UI のドラッグ可能でサイズ変更可能な.

これは、私が求めているものを説明するために作成した jsFiddle です。

于 2013-06-13T20:02:08.677 に答える