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

Question

如何制作一个小书签，其中有一个在屏幕中间弹出的 div？

看起来很简单，就是下不了。

Answer 1

要使 div 出现在屏幕中间，您需要两个 div，一个在另一个内部：

• 外层 div 的位置固定在前 50%；左：0px；右 0px; 高度：1px 和溢出：可见
• 内部 div 绝对定位到左侧：50%，顶部：减去 div 的高度，并且左边距为减去 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 所以如果你检测到 IE6，你可能想要回退到 position: absolute 并滚动到页面顶部。

至于小书签：您需要编写构造这些元素的 javascript 并将其附加到页面底部。这是使用 javascript 向页面添加元素的详细教程。

Answer 2

javascript:var theDiv = document.createElement('div'); theDiv.appendChild(document.createTextNode('hello')); theDiv.style.position="absolute";theDiv.style.left='50%';theDiv.style.top='50%';theDiv.style.border='solid 2px black'; document.body.appendChild(theDiv); 无效（0）；