0

我在弹出 div 时遇到问题。我希望能够相对于主体定位弹出窗口，以便它们不居中。我遇到的问题是它们嵌套在导航 div 中，我只能相对于它定位它们，因为它必须绝对定位，因为我希望它出现在屏幕的中心。

所以我的两个问题是：

  • 不能相对于身体定位 Div。
  • 当 div 出现时，它们会将导航项推到不合适的位置。

解决方案：

  • 找到一种方法让 div 忽略它的当前父 div 并将其自身定位到与 body div 相关的位置。

您可以在下面的 jsFiddle 中找到我的代码，并提前感谢您的帮助。

http://jsfiddle.net/Uj3R7/5/

HTML

<div id="menu">

    <div id="name"><a href="" title="">name</a></div>

    <ul id="nav">

        <li><a class="pop-up-link" href="#" title="about">about</a>&nbsp; | &nbsp;
            <div class='about'><a href='#' title="close" class='close'><img src='img/close.png' alt='close' height="20" width="20" /></a>
                <p>content</p>
            </div>
        </li>

        <li><a class="pop-up-link" href="#" title="press">press</a>&nbsp; | &nbsp;
            <div class='press'><a href='#' title="close" class='close'><img src='img/close.png' alt='close' height="20" width="20" /></a>
                <p>content</p>
            </div>
        </li>

        <li><a class="pop-up-link" href="#" title="diary">contact</a>&nbsp; | &nbsp;
            <div class='contact'><a href='#' title="close" class='close'><img src='img/close.png' alt='close' height="20" width="20" /></a>
                <p>content</p>
            </div>
        </li>

        <li><a class="pop-up-link" href="#" title="contact">diary</a>
            <div class='diary'><a href='#' title="close" class='close'><img src='img/close.png' alt='close' height="20" width="20" /></a>
                <p>content</p>

            </div>
        </li>

    </ul>
</div>​

CSS

body {
    position: relative;
    width: 100%;
    height: 100%;
}

#menu {
    position:fixed;
    overflow: visible;
    width: 400px;
    height: 200px;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -100px;
    text-align: center;
}

#name {
    font-size: 26px;
    line-height: 50px;
    vertical-align: middle;
    border-bottom: 1px solid #000;
}

#nav li{
    font-size: 14px;
    width: 300px;
    line-height: 25px;
    vertical-align: middle;
    display: inline;
}

.close { 
    float: right; 
    position: relative; 
    z-index: 99999; 
    margin: 3px 6px 0; 
}

.about { 
    position: relative; 
    padding: 5px; 
    background: #F7E39A; 
    display:none; 
    width:500px; 
    margin: 0 auto; 
    min-height: 200px; }

.press { 
    position: relative; 
    float: right; 
    top: -200px; 
    right: 500px; 
    padding: 5px; 
    background: #DEA1B7; 
    display:none; 
    width:250px; 
    min-height: 200px; 
}

.contact { 
    position: relative; 
    padding: 5px; 
    background: #6666FA; 
    display:none; 
    width:500px; 
    margin: 0 auto; 
    min-height: 200px; 
}

.diary { 
    position: relative; 
    float: left; 
    top: 0px; 
    padding: 5px; 
    background: none; 
    border: #291DFA 1px solid; 
    display:none; 
    width:100px; 
    min-height: 200px; 
}​

jQuery

$(function() {

    var height = $(document).height();
    var width = $(document).width();
    var spanHeight = $('.popup').height();
    var spanWidth = 500;

    $('.pop-up-link').click(function() { 

        $(this).next() 
        .css({ "top" :  height/2 - spanHeight/2 }) // Centre Pop Up
        .css({ "left" : width/2 - spanWidth/2 })    
        .fadeIn(500);
    });

    $(".close").click(function () {
        $('.pop-up-link').next().fadeOut(500);
    });
});​

解决方案

我重新编写了代码以允许弹出窗口成为主体标签的子级，以便我可以相对于主体定位它们。我正在使用 SimpleModels 并使用百分比定位 div。

jQuery(function ($) {
    $('#menu .about').click(function (e) {
        $('#about-content').modal({position: ["20%","65%"]});
        return false;
    });
});
4

3 回答 3

1

为了解决这个任务，我们将关注CSS 属性 "position"。但是，由于我们无法看到您示例中存在的所有 CSS，因此可能存在继承问题。

要相对于父元素的右上角定位多个子元素，必须满足一些条件。

  • 父元素的“位置”值不等于“静态”。
  • 每个子元素必须具有“绝对”的“位置”值。
  • 每个子元素都应该有一个“top”和“left”值（正或负），它描述了它与父元素内标准定位的偏移量。

由于我们试图定位的 <div> 在 <body> 中的深度适中，我不确定我们是否应该尝试定位，因为更改它们之间元素的 CSS 会极大地移动我们的定位。

我个人的建议是将您要在 <body> 中定位的 <div> 重新定位到 DOM 上，以便它们是 <body> 的直接子级。然后，将 <body> 的“位置”设置为可能的“相对”（可能没有必要，因为它是显示的根元素），然后我们可以使用 style="position:absolute; top 定位我们的 <div>： NN; left:NN;"，其中 NN 是某个整数值。这将满足您相对于 <body> 的定位目标。

PS 如果您想相对于页面上的其他位置（例如，中心）进行定位，只需在其中创建一个居中的 1x1 <div> 并设置 style="position:relative;"，然后将定位的元素放置在该位置中。

我认为您会发现 css 定位在您的网页设计工作中是一项巨大的资产，尤其是与诸如z-index之类的样式结合使用时。我希望这有帮助

于 2012-10-19T20:45:54.520 回答
1

我认为这里的问题是如何使用定位。

绝对定位的元素不再是布局流程的一部分。它们在自己的宇宙中作为“层”存在，使用 z-index 堆叠。

相对定位的元素是布局的一部分——因此移动它们可以改变流程。

position:absolute- 这会相对于已设置的第一个父position:relative元素定位元素。如果没有设置父级，则位置将从BODY. 把它想象成设置原点——第一个相对定位的父节点成为原点。

如果你想定位一个通用对话框，你通常希望它是 BODY 标签的子标签（如果你想相对于浏览器窗口定位它），或者让它作为你的外部包装的子标签布局（将其定位到布局，例如当您的设计位于屏幕中央时）。

您通常希望避免position:relative出于此问题的目的使用。

于 2012-10-19T20:33:32.170 回答
0

我想这就是你想要的。

http://jsfiddle.net/LtsJ4/5/

这些是我所做的更改

  • 在所有四个 div 上制作position样式元素absolute
  • 在您的 javascript 代码中更改document为'body'
  • 添加"px"到您的 CSS 调用中。
于 2012-10-19T20:28:54.510 回答