发布于 2017-02-01 03:06:34 | 241 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


这篇文章主要介绍了js与css实现弹出层覆盖整个页面的方法,分别以实例形式展示了弹出层覆盖整个页面的css样式与js控制的实现技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了js与css实现弹出层覆盖整个页面的方法。分享给大家供大家参考。具体实现方法如下:

弹出层透明背景加框的常用样式和结构如下:

.alertMessageBg{

position:fixed;

_position:absolute;

width:100%;

height:100%;

left:0;

top:0;

background:#000;

opacity:0.5;

-moz-opacity:0.5;

filter:alpha(opacity=50);

z-index:97;

display:none;

}

.alertMessageDivBorder{

position:fixed;

_position:absolute;

width:750px;

height:370px;

left:50%;

top:50%;

margin:-185px 0 0 -375px;

background:#000;

filter:alpha(opacity=30);

-moz-opacity:0.3;

opacity:0.3;

z-index:98;

display:none;

}

.alertMessageDiv{

position:fixed;

_position:absolute;

width:730px;

height:350px;

left:50%;

top:50%;

margin:-175px 0 0 -365px;

background:#fff;

z-index:99;

display:none;

font-size:14px;

}

<div class="alertMessageBg"></div>
<div class="alertMessageDivBorder"></div>
<div class="alertMessageDiv"></div>

弹出层背景覆盖整个网页的方法

1.css方法

.alertMessageBg{

position:fixed;

_position:absolute;

width:100%;

height:100%;

left:0;

top:0;

background:#000;

opacity:0.5;

-moz-opacity:0.5;

filter:alpha(opacity=50);

z-index:97;

display:none;

}

2.js方法

.alertMessageBg{

position:absolute;

width:100%;

height:100%;

left:0;

top:0;

background:#000;

opacity:0.5;

-moz-opacity:0.5;

filter:alpha(opacity=50);

z-index:97;

display:none;

}

var bgWidth = document.body.clientWidth + 'px',
  bgHeight = document.body.clientHeight + 'px',
  alertBgNode = $('.alertMessageBg');
alertBgNode.css({'width':bgWidth,'height':bgHeight});

对比以上两种方法,显然css方法更省事,尤其在不用兼容ie6的现在。

希望本文所述对大家基于JS的web程序设计有所帮助。



最新网友评论  共有(0)条评论 发布评论 返回顶部
推荐阅读
最新资讯

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务