jQuery实现的创建交互式、快速动态网页应用的网页开发技术简单弹出层效果代码

本文实例讲述了jQuery实现的创建交互式、快速动态网页应用的网页开发技术简单弹出层效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；字符集=GB 2312/标题无标题文档/title脚本类型=' text/JAVAScript ' src=' http : jquery 1。3 .2 .js /脚本样式类型='text/css '！- html，正文{身高： 100%；margin : 0px font-size : 12px；} .mydiv {底色： # ffcc 66border: 1px固体# f00文本对齐：中心；线高： 40pxfont-size : 12px字体粗细：粗体；z指数： 99；宽度： 300像素；高度： 120像素；左侧： 50%;/* FF IE7 */top : 50%；/*FF IE7*/边距-左：-150像素！重要；/*FF IE7该值为本身宽的一半*/margin-top: -60px！重要；/*FF IE7该值为本身高的一半*/边距-top : 0px；位置：固定！重要；/*FF IE7*/position:绝对值；/*IE6*/_top:表达式(评估(文档。兼容模式文档。compat mode==' css1 compat ')？文档元素。向上滚动(文档。文档元素。客户身高-这个。offset theight)/2 :/* IE6 */文档。尸体。向上滚动(文档。尸体。客户身高-这个。客户端高度)/2)；/* IE5 IE5.5 */}。mydiv 2 {底色： # ffcc 66border: 1px固体# f00文本对齐：中心；线高： 40pxfont-size : 12px字体粗细：粗体；z指数： 99；宽度： 400像素；高度： 400像素；左侧： 50%;/* FF IE7 */top : 50%；/*FF IE7*/边距-left: -200px！重要；/*FF IE7该值为本身宽的一半*/margin-top: -200px！重要；/*FF IE7该值为本身高的一半*/边距-top : 0px；位置：固定！重要；/*FF IE7*/position:绝对值；/*IE6*/_top:表达式(评估(文档。兼容模式文档。compat mode==' css1 compat ')？文档元素。向上滚动(文档。文档元素。客户身高-这个。offset theight)/2 :/* IE6 */文档。尸体。向上滚动(文档。尸体。客户身高-这个。客户端高度)/2)；/*IE5 IE5.5*/} .BG {底色： # 666；宽度： 100%;高度： 100%;左： 0；top : 0；/*FF IE7*/filter: alpha(不透明度=50);/* IE */opa城市3360 0.5；/* FF */z-index : 1；位置：固定！重要；/*FF IE7*/position:绝对值；/*IE6*/_top:表达式(评估(文档。兼容模式文档。compat mode==' css1 compat ')？文档元素。向上滚动(文档。文档元素。客户身高-这个。offset theight)/2 :/* IE6 */文档。尸体。向上滚动(文档。尸体。客户身高-这个。客户端高度)/2)；/* IE5 IE5.5 */}-/风格脚本语言=' JavaScript '类型=' text/JavaScript '函数showDiv() { $('#popDiv ').removeClass().addClass('mydiv ').css('显示'，'块').css(“”背景，' ff9 ')；$('#bg ').css('display '，' block ')；}函数showDiv2() { $('#popDiv ').removeClass().addClass('mydiv2 ').css('显示'，'块').css(“”背景','粉色');$('#bg ').css('display '，' block ')；}函数closeDiv() { $('#popDiv ').css('display '，' none ')；$('#bg ').css('display '，' none ')；}/脚本/头体加载时=' $(' # BG ').css('height '，document.body.clientHeight).css('width '，文档。尸体。客户端宽度)；div id=' PopDiv ' class=' my div ' style=' display : none；'动态弹出的层br /动态弹层的内容br/a href=' JavaScript : CloseDiv()'关闭窗口/a/div div id=' BG ' class=' BG ' style=' display : none；/div div style=' height : 1400 px；div style=' text-align : center；a href=' javascript:showDiv()'点我1/ABR/br/a href=' JavaScript : shou tiv 2()'点我2/a /div /div/body/html希望本文所述对大家jQuery程序设计有所帮助。