Question

对于javascript我使用jQuery框架，但可以轻松地将任何javascript函数集成到其中。我遇到的问题是当我点击链接时，我有一个淡入淡出的div。如何让它在页面中心对齐并在滚动时保持不变。

以下是我目前实施的示例：

HTML code：

<div id="dividname">
    <h2>Heading Goes Here</h2>
    <p>content goes here</p>

    <p><a href="#" class="close-box">Close Box</a></p>
</div>

CSS代码：

#dividname {
    position:absolute; z-index:100; width:600px; height:600px; display:none;
}

jQuery代码：

$(document).ready(
    function() {

        // on click show div
        $('a.popup').click(
            function() {
                $('#dividname').fadeIn('slow');
            }
        }

    }
);

Answer 1

试试这个：

#dividname {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -300px;
    margin-left: -300px;
    z-index: 100;
    width: 600px;
    height: 600px;
}

其中margin-top和margin-left分别是height和width的一半。

Answer 2

尝试使用此modal div获取jquery

如果用户滚动

，此工具将负责为您移动

// to show
$.blockUI({ message: $('[id$=div]'),
    css: 
    {
        top: 50%;
        left: 50%;
        margin-top: -300px;
        margin-left: -300px;
    }
 });

// to hide                                    
$.unblockUI({ message: $('[id$=div]') });

Answer 3

尝试将您的风格更改为

#dividname {

z-index:100; width:600px; height:600px;
position: fixed;
top: 50%;
left: 50%;

}

希望这有帮助！

编辑：

顺便说一句，这是一个让它在IE6中工作的黑客，

* html #dividname {
 position: absolute;
 top: expression((document.documentElement.scrollTop || document.body.scrollTop) +
 Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) /
 100) + 'px');
}

（取自jqModal样式表）

Answer 4

为了使滚动保持居中，您需要附加一个功能，将其移动到滚动位置。

你可以这样做：

$(window).scroll(resize())

获取您当前的职位：

$(window).scrollTop();

这将符合IE6问题。

Javascript以页面为中心的div

4 个答案: