Question

打开弹出窗口后，想要在jquery中隐藏背景显示模态。请查看以下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>

请检查这个小提琴并帮助我做这件事。

Answer 1

我不相信模态对话框是在这种情况下使用的适当元素。模态对话框通常用于吸引用户的注意力并让他们执行全局操作，例如删除某些内容的确认消息。我不确定你想用你的模态完成什么，但我建议你去寻找一个简单的显示/隐藏部分。这样，它就可以放在内容块的上下文中。 Foundation的模态总是相对于视口定位，而不是定位到特定容器。

查看有关如何最佳使用模态和叠加层的文章：https://www.nngroup.com/articles/overuse-of-overlays/

jquery显示模态弹出对齐

1 个答案: