在html中弹出具有不透明背景的舞台

Question

我需要创建一个弹出窗口like the map has here on this page，但我不确定如何最好地做到这一点并想知道是否有人可以指出我的某些代码会匹配这种效果？

任何想法都会很棒。

Answer 1

要创建基本对话框/模态，您只需创建新的div或使用div和position: fixed显示现有z-index: 1000（或其他一些高值）使用JavaScript。 div可以包含您喜欢的任何内容。除了dialog / modal div之外，您可能还需要一个背景div，可能至少具有以下样式：

position: fixed;
height: 100%;
width: 100%;
z-index: 500; // or some other high value

如果您不想创建自己的，可以查看jQuery UI dialogs或bootstrap modals。

Answer 2

Twitter Bootstrap模态jQuery插件真的很棒。您可以通过自定义引导来获取html和javascript：http://twitter.github.io/bootstrap/customize.html

仅从组件部分选择模态，从jQuery插件部分选择模态，而不选择其他任何内容。然后下载。

如何使用它可以在这里找到：

http://twitter.github.io/bootstrap/javascript.html#modals

基本上你所做的就是在你的标记中，制作一个将成为弹出窗口的div，然后给它“modal hide fade”这个类。然后创建一个按钮来切换模态，并为其赋予属性data-target =“（模态div的css选择器）”和data-toggle =“modal”。