弹出层，漂浮层，窗口永远正中

弹出层，漂浮层，窗口永远居中
弹出一个登录框，希望这个框永远居中状态。。谁能给个代码。。或者给个思路什么的。。一下是我自己根据网上信息改的但是没效果，登录框还是一直在最上面；弹出层，漂浮层，窗口永远正中

<div class="login-page" id="div1">

<div id="login-back-color"
style="top: 0px; left: 0px; position: fixed; width: 1360px; height: 610px; opacity: 0.1; z-index: 1000; background-color: rgb(0, 0, 0);">
</div>
<div id="div2" class="login-user-box"
style="position: absolute; width: 400px; height: 320px; left: 483px; top: 40px; z-index: 2000; background-color: #ffffff; border: 5px solid #ddd;">

<div class="login-box-head" id="div3"
style="background-color: #f7f7f7; height: 35px; border: 1px solid #ddd; border-bottom: 0;">

<div class="login-exit-box" id="login-exit-box"
style="width: 16px; height: 25px; width: 25px; position: absolute; right: 0px; top: 0px;">
<a id="login-exit-icon" class="login-exit-icon"
style="height: 25px; display: block; background-image: url('/images/login-exit-icon.png'); background-repeat: no-repeat;"></a>
</div>
<span class="login-box-title" id="login-box-title"
style="font-weight: bold; color: #666; padding: 10px 0 13px; margin-left: 29px; display: block;">登录网站帐号</span>
<form id="login-info-box" class="login-info-box" action="__URL__/login_submit" method="get" autocomplete="off">

<div id="login-error-line" class="login-error-line"
style="height: 15px; line-height: 30px; font-size: 15px; color: #fc4343; margin-left: 50px;">
请输入账号和密码！</div>

<div id="login-box" class="login-box"
style="margin-top: 25px; margin-left: 30px;">
<p id="login-count" class="login-count-pw">
<input type="text" name="user_name" placeholder="手机/邮箱/用户名"
style="height: 35px; width: 320px; font-size: 16px; text-indent: 40px;  background-repeat: no-repeat;">
</p>
<p id="login-pw" class="login-count-pw">
<input type="password" name="user_password" placeholder="6-16位密码"
style="height: 35px; width: 320px; font-size: 16px; text-indent: 40px;  background-repeat: no-repeat;">
</p>
<p id="auto-login" class="auto-login">
<input type="checkbox" id="login-check-box" name="memberPass"
class="auto_login-checkbox" checked="checked"> <label
for="login-check-box" id="login-check-box-label"
style="font-size: 13px">下次自动登录</label> <a class="forget-pw"
href="" target="_blank"
style="margin-left: 120px; font-size: 13px">忘记密码？</a>
</p>
<p>
<input id="login-submit" type="submit" value="登  录"
class="login-submit"
style="height: 35px; width: 330px; background-color: #014ccc; font-size: 20px; color: #fff">
<br/> <a class="login-submit-link" href="/index.php/home/Index/register"
target="_blank"
style="position: absolute; bottom: 20px; right: 60px; font-size: 13px;">立即注册</a>
</p>
</div>
</form>
</div>
</div>
</div>

<script>
window.onresize=window.onload=window.onscroll=function (){
center("div1");
center("div2");
center("div3");
};
function center(obj){
var div1=document.getElementById(obj);
div1.style.top=(document.documentElement.clientHeight-div1.offsetHeight)/2+"px";
div1.style.left=(document.documentElement.clientWidth-div1.offsetWidth)/2+"px";
}
</script>

js 或者jq能实现就好
------解决方案--------------------
“永远”包括滚动条滚动时候也居中么？
这是我写的jquery插件，兼容所有浏览器和jquery库



(function($){

   /*    弹出层插件  使用:$(selector).Ypop()  

    *@parame poper 触发者接受选择器或jquery对象。空则无条件弹出

    *@param closer 关闭者,空为弹窗中的.close_btn

    *@param function fx 动态效果函数

    *@param Boolean needMask 是否有遮罩层

    *@param string  maskId 如果设置mask就要设置id和needMask

    *@param string  eventType 触发的事件

    *@param Boolean autoScroll 滚动时弹窗是否也自动滚动

    *@param Boolean autoClose 是否自动关闭 todo未实现

    *@param int divWidth 设定popdiv宽

    *@param int divHeight 设定popdiv高

    */

    $.fn.Ypop=function(opts){

弹出层，漂浮层，窗口永远正中

相关推荐