jquery显示模式弹出对齐

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

我不认为模态对话框是在这种情况下使用的适当元素。模态对话框通常用于抓住用户的注意力并让他们执行全局操作，例如删除某些内容的确认消息。我不确定你想用你的模式完成什么，但我会建议去更多的简单的显示/隐藏部分。这样，它可以放置在您的内容块的上下文中。基金会的模式总是要相对于视口而不是特定的容器。

退房本文就如何模态和覆盖最好使用：https://www.nngroup.com/articles/overuse-of-overlays/