0

我在博客上发现了一个很好的灯箱效果，但我不确定如何按照我需要的方式对其进行调整。除了操作背景opacity和之外z-index，它还通过将 div 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 站点中，对话框在 a 内运行，<iframe>因此您可能会误以为它在<div>.

我的建议是将 jQuery UI 组件放在你的灯箱中，因为它已经有点像一个对话框。此外，如果您希望您的灯箱移动，您应该使用 jQuery UI 的可拖动和可调整大小。

这是我用来解释我所追求的 jsFiddle。

于 2013-06-13T20:02:08.677 回答