html - 如何使用 BootStrap 实现关于 "recent achievements"的 stackoverflow header 下拉菜单的 css？

Question

最近，我发现 stackoverflow 的最近成就很棒，当单击标题为“最近的成就:声誉、徽章和特权”的 SO 标题图标时，我得到一个特殊的对话框:

我尝试了 Bootstrap modal-dialog，但有一些问题:

(1) 这个modal-dialog会随机放在某个特定的地方，但我希望它像SO一样放在图标旁边，我发现SO使用了固定位置:

style="top: 34px; left: 190.21875px; display: block;"

不知道top: 34px; left: 190.21875px; 是在设计时设置的，还是其他方式设置的？

(2) 当我启动一个modal-dialog时，同时它会像生成一层阴影一样改变body的颜色直到它关闭，比如here ，不改变车身颜色怎么办？

更新:

我尝试使用 Bootstrap 的 nav、dropdown 和 dropdown-menu 构建测试版本:http://jsfiddle.net/j9334pbr/ .如果您有更好的解决方案，请告诉我!

Answer 1

当模式打开时，听起来您不希望整个页面都覆盖有阴影。如果是这样，那么有理由这样做，如果用户单击页面上的任何位置，模态将位于打开的窗口后面。它使用 z-index 将页面分层，仅具有阴影外观。使用 css 使其看起来不同的快速方法，但几乎您想要做的是使用此 css 并确保将其放置在任何 Bootstrap css 链接的末尾/下方。

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}

如果您打开一个 Bootstrap 非最小 css 文件并转到第 5726 行，这是模态类开始的地方。这是 v3.3.4 版本。

您可以在任何地方放置一个按钮来打开消息。我希望这对您有所帮助并帮助您入门。祝你好运。