js弹出div 控制div在窗口中的位置 居中
div代码
?
<!-- 修改个人信息失败弹出div -->
??? <div display: none;"
??? ??? id="editUserFail" align="center">
??? ??? <div />
??? ??? ??? </div>
??? ??? ??? <div onclick="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";
?
