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/