Javascript以页面为中心的div

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

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

HTML代码：

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

    }
);

解决方法:

试试这个modal div for jquery

如果用户滚动,此工具将为您处理移动

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

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