Question

如何制作那些新奇的弹出式窗口Web 2.0，就像网站要求您进行调查或捐款一样？更重要的是，他们叫什么？

Answer 1

我会将这些 popovers 称为弹出广告，这些通常被视为单独的浏览器窗口。 DIV叠加是另一个好词。

如何制作它们？如果您不需要全屏阴影，并且您不需要在IE6中覆盖Flash或下拉菜单，这非常简单。它只是一个绝对定位的DIV。假设您的页面中有DIV，如下所示：

<div style="display:none" class="survey">
    <h1>Take the annoying survey please</h1>
    <form>
    <ol>
        <li>
             Did this survey popover annoy you so much you'll never visit
             this site again and you'll click X to delete the result
             from the Google search that brought you here?<br>
             <input type="checkbox" value="yes" id="hellyes">
                 <label for="hellyes">Yes</label><br>
             <input type="checkbox" value="no" id="nope">
                 <label for="nope">Nope</label><br>
             <input type="submit">
       </li>
    </ol>
    </form>
</div>

你要把它显示为一个弹出框就是给它这个CSS：

display:block; position:absolute;
top:100px; left:300px; width:300px;
border:2px solid black;
/* Add fancier styling here */

Answer 2

它们只不过是花哨的<div>标签（或类似的东西）。

任何体面的UI包都会有类似的东西。 ExtJS有一个“Dialog”类，jQuery也是如此。我认为这将是你正在寻找的东西。

Ex：http://jqueryui.com/demos/dialog/

Answer 3

它们最多来自'灯箱'，其中图像以叠加方式显示。如今你可能会发现它们被称为“厚盒”，因为它们不仅仅是图像。

Here's one.

IMO这两种只是Modal windows的类型。

当然，名称并不重要。大多数javascript UI库都有这样的东西。

Answer 4

他们被称为弹出窗口。你会发现一些被称为其他东西的自定义实现（例如，lightbox）。基本上，您创建一个div并将其zIndex设置为高于页面上的任何其他值，并将其位置设置为绝对值，将其顶部和左侧设置为在页面上进行定位。

一些开发人员还创建了一个掩码（在弹出窗口可见时隐藏或取消激活页面的其余部分 - 并使其像一个模态对话框一样）。为此，创建另一个具有背景颜色（通常为黑色或白色）的div，然后将不透明度设置为50 - 70％ - 然后将其zIndex设置为高于页面上的任何其他值（但低于弹出窗口），并且将其位置设置为绝对，将其顶部和左侧设置为0，将宽度和高度设置为与页面匹配。

Answer 5

还有一个例子：http://fancybox.net/example

请注意，从用户界面的角度来看，Dialog与灯箱不同。

对话框用于短文本，提示消息，其中灯箱强调图像或一段内容。

你如何制作那些新奇的弹出窗口？

5 个答案: