var createMask = function(){ var mask = $('<div id="_mask_"></div>').css({ zIndex: 100, width:'100%', height:document.documentElement.clientHeight, backgroundColor: '#A2A2A2', position: 'absolute', top:document.documentElement.scrollTop, //top: 0, //left: 0, left:document.documentElement.scrollLeft, filter: 'alpha(opaticy=50)', opacity: 0.5, display: 'none' }) .appendTo('body'); $(window).resize(function(){ mask.css({ height: document.documentElement.clientHeight, width: '100%' }); }); $(window).scroll(function(){ $('#_mask_').css({ 'top': document.documentElement.scrollTop, 'width': document.documentElement.scrollWidth }); }); }; createMask(); var showMask = function(){ $('#_mask_').show(); }; var hideMask = function(){ $('#_mask_').hide(); }; 这里是用了jQuery 1.4 插件。 这个mask可以自适应屏幕大小,并且在滚屏的时候可以自适应高度。 也就是说永远会遮住整个屏幕。