javascript遮盖,JavaScript遮盖PC端页面
怎么用JS弄遮罩层?全屏,有透明
css:
#loadArea{
position:fixed;
width:100%;
height:100%;
z-index:9999;
opacity:0.8;
background:#A8A1A1;
}
javascript:
$(document).append('div id="loadArea"/div');
js弹出的遮罩层,如何能遮住全屏?
工具:电脑;浏览器;ultraedit软件;
操作步骤如下:
1、打开UE编辑器,新建一个空白的html文件和css文件;
2、在html文件中输入以下html代码;
3、在css文件中输入以下css代码;
4、编辑完成之后,选择格式为UTF8-无 BOM模式,保存文件;
5、在浏览器中打开此html文件,可以看到最终想要实现的遮住全屏效果。
js遮罩窗体怎么做
1、实现原理
* 实际上弹出层、遮罩层和原页面显示分别为三个不同的div
* 弹出层的层级在遮罩层之上,遮罩层的层级在原页面显示之上;
* 遮罩层有通明效果
* 遮罩层没有实际意义,则无需在html部分就写上,当然写上同样可以实现
2、代码实现
html语言如下:
body
center
div input type="button" value="go" onclick="show()"/div
div id="alert" style="display:none;"
form
登录
input type="text"input type="password"input type="submit" value="login"
/form
/div
/center
/body
javascript实现弹出层和遮罩层:
span style="font-size:12px;"scriptfunction show(){
var alertPart=document.getElementById("alert");
alertPart.style.display="block";
alertPart.style.position = "absolute";
alertPart.style.top = "50%";
alertPart.style.left = "50%";
alertPart.style.marginTop = "-75px";
alertPart.style.marginLeft = "-150px";
alertPart.style.background="cyan";
alertPart.style.width="300px";
alertPart.style.height="200px";
alertPart.style.zIndex = "501";
var mybg = document.createElement("div");
mybg.setAttribute("id","mybg");
mybg.style.background = "#000";
mybg.style.width = "100%";
mybg.style.height = "100%";
mybg.style.position = "absolute";
mybg.style.top = "0";
mybg.style.left = "0";
mybg.style.zIndex = "500";
mybg.style.opacity = "0.3";
mybg.style.filter = "Alpha(opacity=30)";
document.body.appendChild(mybg);
document.body.style.overflow = "hidden";
}
/script/span
javascript的圆形遮罩问题?
在页面里加个全屏的div块,设置半透明,z-index设置最高。然后将放大后的图片z-index设置比遮罩层高一点。点击遮罩层或关闭按钮后用JS隐藏遮罩层和图片。
Javascript鼠标事件怎么捕获遮盖的元素?
通过事件冒泡来触发事件,获取当前事件对象代码
alert(e.currentTarget.id)
上一篇:java吃豆人代码 js吃豆人
栏 目:JavaScript
下一篇:javascript前身,javascript的前身
本文标题:javascript遮盖,JavaScript遮盖PC端页面
本文地址:https://www.xiuzhanwang.com/a1/JavaScript/17119.html
您可能感兴趣的文章
- 04-02javascript潜力,javascript强大吗
- 04-02javascript点线,点线的代码
- 04-02javascript移出,js 移入移出
- 04-02javascript替换字符串,js字符串的替换
- 04-02包含javascript舍的词条
- 04-02javascript匿名,js匿名方法
- 04-02javascript并行,深入理解并行编程 豆瓣
- 04-02javascript警报,JavaScript警告
- 04-02javascript前身,javascript的前身
- 01-10JavaScript实现简单计算器功能
阅读排行
本栏相关
- 04-02javascript点线,点线的代码
- 04-02javascript潜力,javascript强大吗
- 04-02javascript替换字符串,js字符串的替换
- 04-02javascript移出,js 移入移出
- 04-02包含javascript舍的词条
- 04-02javascript并行,深入理解并行编程 豆瓣
- 04-02javascript匿名,js匿名方法
- 04-02javascript警报,JavaScript警告
- 04-02javascript遮盖,JavaScript遮盖PC端页面
- 04-02javascript前身,javascript的前身
随机阅读
- 01-10SublimeText编译C开发环境设置
- 01-11ajax实现页面的局部加载
- 01-10C#中split用法实例总结
- 08-05织梦dedecms什么时候用栏目交叉功能?
- 04-02jquery与jsp,用jquery
- 08-05dedecms(织梦)副栏目数量限制代码修改
- 08-05DEDE织梦data目录下的sessions文件夹有什
- 01-10delphi制作wav文件的方法
- 01-11Mac OSX 打开原生自带读写NTFS功能(图文
- 01-10使用C语言求解扑克牌的顺子及n个骰子