javascript - jquery 显示模态弹出对齐

Question

打开弹出窗口后，想在 jquery reveal modal 中禁用背景。请看下面fiddle .在这个 fiddle 中它正在工作，但它占据了整个屏幕。我想将它设置在特定的 div 中。

$(function () {

    $(document).foundation();

    $('ul.f-dropdown li a').on('click', function (event) {
        console.log('Dropdown clicked', event.target);
        $('.reveal-modal').foundation('dropdown', 'closeall');
    });

});

.generation .reveal-modal {
    background-color: red;
}
.generation{
  width:700px;
  height:400px;
  background:lightgreen;
}

<a href="#" data-reveal-id="myModal">Click Me For A Wonky Modal</a>

<div class='generation'>
    <div id="myModal" class="reveal-modal" data-reveal>
         <h2>Wonky Dropdown Dialog</h2>
 <a href="#" data-dropdown="drop1">Has Dropdown</a>

        <ul id="drop1" class="f-dropdown" data-dropdown-content>
            <li><a href="#">This is a link</a>

            </li>
            <li><a href="#">This is another</a>

            </li>
            <li><a href="#">Yet another</a>

            </li>
        </ul> <a class="close-reveal-modal">&#215;</a>

    </div>
</div><!-- / .generation -->
<hr/>
<a href="#" data-reveal-id="myWorkingModal">Click Me For A Working Modal</a>

<div id="myWorkingModal" class="reveal-modal" data-reveal>
     <h2>Working Dropdown Dialog</h2>

<a href="#" data-dropdown="drop1">Has Dropdown</a>

    <ul id="drop1" class="f-dropdown" data-dropdown-content>
        <li><a href="#">This is a link</a>

        </li>
        <li><a href="#">This is another</a>

        </li>
        <li><a href="#">Yet another</a>

        </li>
    </ul> <a class="close-reveal-modal">&#215;</a>

</div>

请检查此 fiddle 并帮助我执行此操作。

Answer 1

我认为模态对话框不适合在这种情况下使用。模态对话框通常用于吸引用户的注意力并让他们执行全局操作，例如删除某些内容的确认消息。我不确定你想用你的模态完成什么，但我建议你选择更多的简单显示/隐藏部分。这样，它就可以放在您的内容 block 的上下文中。 Foundation 的模式总是相对于视口(viewport)定位，而不是特定容器。

查看这篇关于如何最好地使用模式和叠加层的文章:https://www.nngroup.com/articles/overuse-of-overlays/