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

Question

<分区>

Answer 1

我将这些称为弹出窗口，以区别于通常被视为独立浏览器窗口的弹出窗口。 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 */