Question

我在博客上发现了一个很好的灯箱效果，但我不确定如何以我需要的方式调整它。除了操纵背景opacity和z-index之外，它还可以通过将divs css显示属性设置为“none”，然后在触发效果时“阻止”。在该div中，我有无序列表，我将jquery menu()和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.

Answer 1

我找不到在<div>内打开UI对话框的方法。可能是因为<body>的孩子一直打开而故意这样做。在jQuery UI网站中，对话框在<iframe>内运行，因此可能会让您相信它位于<div>内。

我的建议是将jQuery UI组件放在灯箱内，因为它有点像对话框。此外，如果你想让你的灯箱移动，你应该使用jQuery UI draggable和resizable。

Here's我用jsFiddle来解释我的目标。

在css灯箱内发布开放jquery ui对话框

1 个答案: