Question

如何制作一个书签，屏幕中间会弹出一个div？

看起来非常简单，我无法理解。

Answer 1

要让div出现在屏幕中间，你需要两个div，一个在另一个内：

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

至于bookmarklet：你需要编写构造这些元素的javascript并将其附加到页面底部。 Here's a detailed tutorial on adding elements to a page with 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 ) ; void(0);

如何使用bookmarklet弹出div？

2 个答案: