js弹出div 控制div在窗口中的位置居中

最新推荐文章于 2021-06-11 15:59:54 发布

sungang1120

最新推荐文章于 2021-06-11 15:59:54 发布

阅读量602

点赞数

分类专栏：细细品味-Javascrip 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/sungang1120/article/details/84416452

版权

细细品味-Javascrip 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

div代码

<div class="puw" display: none;"
        id="editUserFail" align="center">
        <div class="puw_title">
            <div class="puw_title_bt">修改个人信息</div>
            <div class="puw_close"></div>
        </div>
        <div class="puw_part">
            <div class="puw_icon">
                <img src="${ path}/images/delete.png" />
            </div>
            <div class="puw_text">修改失败</div>
            <div class="puw_btn">
                <a href="javascript:" οnclick="closeDiv('editUserFail');"
                    class="btn">确定</a>
            </div>
        </div>
    </div>

js代码

第一种实现：

var editUserFailId = $("#editUserFail");
editUserFailId.show().css({"zIndex":"150","position":"absolute"});
center(editUserFailId);

function center(divId){
        var windowWidth = document.documentElement.clientWidth;
        //alert('窗口宽： '+windowWidth);
        var windowHeight = document.documentElement.clientHeight;
        //alert('窗口高： '+windowHeight);
        var popupHeight = $(divId).height();
        //alert('div高： '+popupHeight);
        var popupWidth = $(divId).width();

        //alert('div宽： '+popupWidth);

        $(divId).css({
            'top':(windowHeight - popupHeight - 270)/2+$(document).scrollTop()+80,
            'left':(windowWidth - popupWidth)/2-45
        });
    }

第二种实现这种是看jquery的jAlert插件的源码

var top = (($(window).height() / 2) - ($("#editUserFail")
                    .outerHeight() / 2))
                    + $.alerts.verticalOffset;
            var left = (($(window).width() / 2) - ($("#editUserFail")
                    .outerWidth() / 2))
                    + $.alerts.horizontalOffset;
            if (top < 0)
                top = 0;
            if (left < 0)
                left = 0;

            // 如果是在IE6或为火狐浏览器下
            //if ($.browser.msie && parseInt($.browser.version) <= 6)
                //top = top + $(window).scrollTop();

            $("#editUserFail").css({
                top : top + 'px',
                left : left + 'px'
            });

第三种实现：

document.getElementById("editUserFail").style.top=(document.documentElement.scrollTop+
(document.documentElement.clientHeight-document.getElementById("editUserFail").offsetHeight)/2)+"px";
document.getElementById("editUserFail").style.left=(document.documentElement.scrollLeft+(document.documentElement.clientWidth-document.getElementById("editUserFail").offsetWidth)/2)+"px";