jquery显示模态弹出对齐

Question

打开弹出窗口后，想要在jquery中隐藏背景显示模态。 请看下面的小提琴 。 在这个小提琴它正在工作，但它占据了整个屏幕。 我想将它设置为特定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/