jQuery实现DIV屏幕自动水平垂直居中

最新推荐文章于 2023-05-25 14:38:05 发布

ChinaLzw

最新推荐文章于 2023-05-25 14:38:05 发布

阅读量1.7k

点赞数

分类专栏： jQuery javascript

本文为博主原创文章，只为分享而编，欢迎各位学习以及转载。

本文链接：https://blog.csdn.net/qq285679784/article/details/78759163

版权

javascript 同时被 2 个专栏收录

125 篇文章 2 订阅

订阅专栏

jQuery

11 篇文章 0 订阅

订阅专栏

css

.na_popup{ width:900px; height:150px; position: fixed; z-index: 1500; top:0; left: 0; }

//封装jQuery插件版

(function($) {
	var methods = {
		autosize: function(ele) {
			if(ele.height() <= $(window).height()) {
				ele.css("top", ($(window).height() - ele.height()) / 2);
			}
			if(ele.width() <= $(window).width()) {
				ele.css("left", ($(window).width() - ele.width()) / 2);
			}
		}
	}
	$.fn.extend({
		propup: function(options) {
			$this = $(this);
			methods.autosize($this);

			$(window).resize(function() {
				methods.autosize($this);
			});
		}
	});
})(jQuery);

$(".na_popup").propup();//要居中的DOM元素

//js版（window.onload,window.onresize时执行）

function autosize(ele) {
    if($(".na_popup").height() <= $(window).height()) {
        ele.css("top", ($(window).height() - ele.height()) / 2);
    }
    if(ele.width() <= $(window).width()) {
        ele.css("left", ($(window).width() - ele.width()) / 2);
    }
}
window.οnlοad=function() {
    autosize($(".na_popup"));
}
window.οnresize=function() {
    autosize($(".na_popup"));
}