弹出窗口不居中显示

弹出窗口不居中显示？

前言：弹出窗口不居中显示？你使用了标准的居中算法还是显示不居中，到底TM是哪里做鬼呢？上一篇文章我介绍了jquery weebox总结，weebox绝对是弹出框的好选择，现在这玩意遇到了很奇葩的问题，就是不居中弹出。

效果

弹出窗口不居中显示

注意：别去计较这个页面的显示。

弹出方法

<div class="blank"></div>

<div class="dlmain" style="overflow: hidden;width:650px;">
    <div class="f_l dlr" style="height: 350px; width: 554px;">
        <div class="dlr1">
            <span class="f_l">用户登录</span> <span class="f_r"
                style="font-size: 14px; color: #8c8c8c; line-height: 14px; margin-top: 16px;">还没账号？ <a href=""
                style="color: #0196db;"> 注册</a>
            </span>
        </div>
        <div class="blank0"></div>
        <form id="user_login_form" name="user_login_form" action="${ctx}/login">
            <div class="control-group">
                <label class="control-label">账户</label>
                <div class="control-text">
                    <div class="pr f_l">
                        <input type="text" name="username" id="username" value="" class="textbox" /> <span class="holder_tip">请输入会员账号</span>
                    </div>
                </div>
                <div class="blank0"></div>
            </div>
            <div class="control-group">
                <label class="control-label">密码</label>
                <div class="control-text">
                    <div class="pr f_l">
                        <input type="password" name="password" id="password" value="" class="textbox" /> <span class="holder_tip">请输入登录密码</span>
                    </div>
                    <a href="" style="color: #1184df; font-size: 13px;">忘记密码？</a>
                </div>
                <div class="blank0"></div>
            </div>
            <div class="blank0"></div>
            <div class="control-group tl">
                <label class="control-label"></label> <label class="ui_checkbox" rel="carry_type"> <input type="checkbox"
                    value="1" name="auto_login" checked="checked" />记住我（下次自动登录）
                </label>
            </div>
            <div class="blank0"></div>
            <div class="control-group">
                <label class="title control-label"></label> <input type="button" value="登录" name="submit_form"
                    class="ui-button theme_bgcolor" id="btn_do_login" onclick="do_login_user();"/>
            </div>
        </form>
    </div>
</div>

<div class="blank"></div>

这个页面很烂。

然后再来看看怎么调用她吧！

function show_pop_login() {
    $.weeboxs.open(common.ctx + "/pages/login/login.jsp?ctl=ajax&act=login", {
        boxid : 'pop_user_login',
        contentType : 'ajax',
        showButton : false,
        showCancel : false,
        showOk : false,
        title : '会员登录',
        width : 700,
        type : 'wee'
    });

//  $.showErr("aaaaaaaaaa");
}

你把页面的路径直接放到open方法中。

然后再来看看居中显示的算法：

this.setCenterPosition = function() {
            var wnd = $(window), doc = $(document),
                pTop = doc.scrollTop(), pLeft = doc.scrollLeft(),
                minTop = pTop;  

            pTop += (wnd.height() - self.dh.height()) / 2;
            pTop = Math.max(pTop, minTop);
            pLeft += (wnd.width() - self.dh.width()) / 2;
            self.dh.css({top: pTop, left: pLeft});

        }

你看这竟然都不居中显示，到底是为啥？

我擦，到现在你还不告诉我答案，我使用firebug在调试这串代码的时候，竟然发现wnd.height()有1400多，我的屏幕压根没有这么大，顶多也就是900多。

Y的，下班了，我不想说了，就是

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这玩意的影响，如果说是


<html xmlns="http://www.w3.org/1999/xhtml">

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/components/common/taglib.jsp"%>
<%@ include file="/components/common/jscsslib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>

这样写，他获取的高度就是有问题的。

然后你需要这样放置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/components/common/taglib.jsp"%>
<%@ include file="/components/common/jscsslib.jsp"%>

<head>

结语：就说到这吧！

1楼qingluohuaxiang11分钟前: 真棒

效果

弹出方法

相关推荐