`

自己写的div遮罩层,里面有个div可以随滚动条变化而自变化,兼容火狐,ie,charom等。

阅读更多
/**
	 * 协议
	 * @param {} obj
	 */
	function zcqyd_xieyiDiv(obj){
		$("#xieyiMengBan").appendTo("html");
		$("#xieyicontent").appendTo("html");
		var htmlH = $("html").height();//获取html的高度
		var htmlW=$("html").width();//获取html的宽度
		var windowH=$(window).height();//获取当前窗口的高度
		var windowW=$(window).width();//获取当前窗口的宽度
		var sH=$(window).scrollTop();//滚动条距离顶部的距离
		var xieyiW=$("#xieyicontent").width();//协议div的宽度
		var xieyiH=$("#xieyicontent").height();//协议div的高度
		var vTop=(windowH-xieyiH)/2+sH;//获取position的top
		var vLeft=(windowW-$("#xieyicontent").width())/2;//获取position的left
		$(window).resize(function(){
			//当窗口变化时候重新获取高度和宽度
			windowH=$(window).height();
			windowW=$(window).width();
			vTop=(windowH-xieyiH)/2+sH;
		});
		$(window).scroll(function(){
			sH=$(window).scrollTop();
			vTop=(windowH-xieyiH)/2+sH;
			$("#xieyicontent").css({position:"absolute",height:"450px",
width:"800px",top:vTop,bottom:vTop,left:vLeft,right:vLeft,zIndex:1001});
		});
		$("#xieyicontent").css({position:"absolute",height:"450px",width:"800px",
top:vTop,bottom:vTop,left:vLeft,right:vLeft,zIndex:1001}).show();
		$("#xieyiMengBan").css({height:htmlH,width:htmlW}).show();
		$("#zcqyd_xieyiP").scrollTop(0);//滚动条回到顶部
	}	

 其中里面的ui-widget-overlay是jqueryui的class.

<div class='ui-widget-overlay' id="xieyiMengBan" style="display:none;"></div>
    <div id="xieyicontent" style="display:none;background:#FFFFFF;width:800px;"></div>

 

  • 大小: 34.4 KB
分享到:
评论

相关推荐

    vue自定义浏览器滚动条(兼容大部分浏览器含ie)_vue tree组件 下拉滚动条

    总结来说,自定义Vue中的滚动条需要考虑浏览器兼容性,可以借助第三方库解决这个问题。同时,我们可以通过CSS和JavaScript来控制滚动条的样式和行为。在实际开发中,应根据项目需求选择合适的方法,并确保测试覆盖...

    div滚动条优化

    "div滚动条优化"这个主题主要关注如何在不牺牲滚动功能的前提下,通过CSS样式和JavaScript技术来美化或定制滚动条,使其更加符合现代网页的审美标准和用户体验需求。 首先,我们要了解默认滚动条的样式通常是浏览器...

    JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome.docx

    使用 CSS 可以自定义浏览器滚动条的样式,但是 CSS 只能转变 Chrome 和 IE 浏览器的样式,无法对 Firefox 浏览器进行样式定义。因此,我们需要使用 JavaScript 来实现自定义浏览器滚动条。 二、JavaScript 实现...

    如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器.pdf

    针对标题提及的"如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器",这里将详细讨论一些关键的CSS兼容性问题及解决方案。 1. **DOCTYPE的影响**: DOCTYPE声明会影响浏览器进入何种文档模式。在HTML4或...

    div滚动条样式一览-div+css设计网

    为了增加滚动条的动态感,我们可以添加`transition`属性,使滚动条在状态变化时有平滑过渡: ```css ::-webkit-scrollbar-thumb { transition: background-color 0.3s ease; /* 背景颜色过渡 */ } ``` 需要注意的...

    Div滚动条随鼠标滚动js版(由网友JQuery版改写而成)

    4. **浏览器兼容性处理**:由于不同浏览器对滚动事件和滚动条的支持程度不同,编写JavaScript代码时需要考虑跨浏览器兼容性,可能需要用到像`event.wheelDelta`(旧版本Firefox和IE)或`event.deltaY`(现代浏览器)...

    jquery定制div滚动条Scrollbar

    描述中提到的“sly jquery定制div滚动条Scrollbar 兼容IE6 FireFox Safari”,意味着这个解决方案不仅关注美观,还考虑到了浏览器兼容性问题。IE6是一个老版本的Internet Explorer,通常对现代Web技术支持不足,而...

    利用div+jquery自定义滚动条

    在这里,`div`可以作为我们需要自定义滚动条的容器,通过设置`overflow`属性来控制内容超出时是否显示滚动条。例如,如果想让div在内容过多时显示横向滚动条,可以这样设置CSS样式: ```css div.scroll-container {...

    原生javascript自定义滚动条(兼容IE,火狐,chrom)

    本篇文章将深入探讨如何使用JavaScript实现自定义滚动条,并确保其在Internet Explorer(IE)、Firefox和Chrome等主流浏览器中的兼容性。 首先,我们需要理解不同浏览器对滚动条的支持情况。在CSS中,Webkit内核的...

    DIV向上滚动新闻,简洁JavaScript示例,高浏览器兼容性

    “测试可兼容于IE、FireFox、Chrome、Opera、Safari等浏览器”意味着这个JavaScript代码经过了多浏览器测试,确保在不同浏览器环境下都能正常工作。这非常重要,因为不同的浏览器可能对某些JavaScript特性或API的...

    自定义滚动条插件

    4. **兼容性好**:插件兼容多种浏览器,包括IE8+、Firefox、Chrome、Safari、Opera等,确保了在各种环境下都能正常工作。 5. **多样化的示例**:mCustomScrollbar提供了大量实例,涵盖了各种应用场景,无论是基础的...

    纯css控制内容随滚动条滚动,可放任意位置

    关于“兼容一切主流浏览器”,CSS的固定定位特性在现代浏览器中已被广泛支持,包括Chrome、Firefox、Safari、Edge和IE9及以上版本。不过,对于较旧的浏览器,如IE8及更低版本,可能需要添加一些兼容性处理,或者考虑...

    层随滚动条移动

    ### 层随滚动条移动技术解析 #### 技术背景与概述 在Web开发中,实现元素(如层)随着页面滚动条的滚动而移动的效果,可以为用户提供更好的交互体验。这种技术通常被称为“粘性定位”或“固定定位”,但在这里提到...

    (十年积累)div+css 完全兼容ie6 ie7 IE8 IE9 和firefox方法.pdf

    然而,不同的浏览器对CSS的支持程度和解析方式存在差异,特别是老版本的Internet Explorer(如IE6、IE7、IE8)与Firefox等现代浏览器。以下是对这些浏览器中CSS兼容性问题的详细解释和解决方案。 1. **高度兼容性**...

    FireFox火狐浏览器与IE兼容问题 - 透明滤镜 DIV滚动条

    IE浏览器可以使用SCROLLBAR-ARROW-COLOR、SCROLLBAR-TRACK-COLOR等属性来设置DIV滚动条的颜色,而FireFox火狐浏览器暂时还没有找到相应的解决方法。 五、border-width问题 IE浏览器可以使用border-width: 0px 0px ...

    ie8-select滚动条

    在IE8浏览器中,"ie8-select滚动条"是一个与网页设计和开发相关的技术问题,主要涉及到CSS样式、JavaScript以及浏览器兼容性。在IE8及其以下版本,原生的HTML `&lt;select&gt;` 元素的滚动条样式无法通过CSS直接自定义,这...

    Javascript的IE和Firefox(火狐)兼容性

    ### Javascript的IE与Firefox(火狐)兼容性解决方案 在Web开发过程中,浏览器兼容性问题一直是开发者们关注的重点之一。由于不同的浏览器对于Web标准的支持程度存在差异,这导致了同样的代码在不同浏览器中的表现...

    div 加滚动条 多样式

    在网页设计中,`div` 是一个非常基础且重要的HTML元素,它被广泛用于布局和组织页面内容...总之,理解和掌握如何在`div`中添加和样式化滚动条是每个前端开发者的基本技能之一,也是提升网页互动性和美观度的重要手段。

    兼容IE与FireFox

    ### 兼容IE与Firefox:JS...通过上述讨论可以看出,在处理IE与Firefox之间的兼容性问题时,需要细致地考虑每个细节,并编写灵活的代码来适应各种情况。希望本文能够帮助您更好地理解并解决实际开发中遇到的兼容性问题。

    div+css学习笔记(IE与fox好多不兼容的问题)

    本文主要讨论了IE(Internet Explorer)与Firefox之间在处理`div+css`布局时的一些常见不兼容问题。 1. **鼠标样式兼容性**: - 在IE中,为元素设置鼠标悬停为手型的CSS代码通常是`cursor: hand;`,但在Firefox中...

Global site tag (gtag.js) - Google Analytics