当前位置：文江博客话题详情

如何使用书签让 div 弹出？

发布于 2024-07-24 07:27:24 字数 56 浏览 5 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

吃颗糖壮壮胆 2024-07-31 07:27:24

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

外部 div 的位置固定在顶部 50%；左：0px；右 0 像素；高度：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，因此如果检测到 IE6，您可能需要回退到position:absolute 并滚动到页面顶部。

至于小书签：您需要编写构建这些元素的 JavaScript 并将其附加到页面底部。这里是有关向页面添加元素的详细教程JavaScript。

To make a div appear in the middle of the screen, you need two divs, one inside the other:

The outer div is has fixed position at top 50%; left: 0px; right 0px; height: 1px and overflow: visible
The innder div is absolutely positioned to left: 50%, top: minus the height of the div and has a margin-left of minus the width of the div. That is:

<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;
}

Don't forget that IE6 doesn't support position: fixed so you might want to fall back to position: absolute and scroll to the top of the page if you detect IE6.

As for the bookmarklet: you need to write javascript that constructs these elements and append it to the bottom of the page. Here's a detailed tutorial on adding elements to a page with javascript.

回复收藏 0 原文

听，心雨的声音 2024-07-31 07:27:24

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);

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);

回复收藏 0 原文

~没有更多了~