bookmarklet - 如何使用书签弹出 div？

Question

如何在屏幕中间弹出一个 div 的地方制作书签？

看起来很简单，就是想不起来。

Answer 1

要让一个 div 出现在屏幕中间，你需要两个 div，一个在另一个里面:

外层 div 固定在 top 50% 的位置；左:0px；右 0px;高度:1px 和溢出:可见

内部 div 绝对位于左侧:50%，顶部:减去 div 的高度，并且有一个 margin-left 减去 div 的宽度。即:

#

<div id="outerDiv">
   <div id="innerDiv">
      Your content
   </div>
</div>

#outerDiv
{
    position: fixed;
    top: 50%;
    height: 1px;
    left: 0px;
    right: 0px;
    overflow: visible;
}

#innerDiv
{
    position: absolute;
    width: 200px;
    height: 100px;
    left: 50%;
    margin-left: -100px;
    top: -50px;
}

不要忘记 IE6 不支持 position: fixed 所以你可能想要回退到 position: absolute 并在检测到 IE6 时滚动到页面顶部。

至于书签:您需要编写 javascript 来构造这些元素并将其附加到页面底部。 Here's a detailed tutorial on adding elements to a page with javascript .