您的位置:

js遮罩层代码(js 遮罩层)

js遮罩层代码(js 遮罩层)

更新:

本文目录一览:

js弹出div并显示遮罩层

弹出div显示遮罩层的效果,想必大家都有见到过吧,下面有个示例,大家可以参考下

代码如下:

//--------------------弹出层-------------------

//popDivId:弹出层div的ID

//dragDivId:用于拖动div的ID

//isShowMask:是否显示遮罩层

function

popDivShow(popDivId,

dragDivId,

isShowMask)

{

if

(isShowMask)

{

creatMask(popDivId);

}

var

oWins

=

document.getElementById(popDivId);

var

oWins_title

=

document.getElementById(dragDivId);

var

bDrag

=

false;

var

disX

=

disY

=

0;

oWins.style.display

=

"block";

oWins_title.onmousedown

=

function(event)

{

var

event

=

event

||

window.event;

bDrag

=

true;

disX

=

event.clientX

-

oWins.offsetLeft;

disY

=

event.clientY

-

oWins.offsetTop;

this.setCapture

this.setCapture();

return

false;

};

document.onmousemove

=

function(event)

{

if

(!bDrag)

return;

var

event

=

event

||

window.event;

var

iL

=

event.clientX

-

disX;

var

iT

=

event.clientY

-

disY;

var

maxL

=

document.documentElement.clientWidth

-

oWins.offsetWidth;

var

maxT

=

document.documentElement.clientHeight

-

oWins.offsetHeight;

iL

=

iL

?

:

iL;

iL

=

iL

maxL

?

maxL

:

iL;

iT

=

iT

?

:

iT;

iT

=

iT

maxT

?

maxT

:

iT;

oWins.style.marginTop

=

oWins.style.marginLeft

=

0;

oWins.style.left

=

iL

+

"px";

oWins.style.top

=

iT

+

"px";

return

false;

};

document.onmouseup

=

window.onblur

=

oWins_title.onlosecapture

=

function()

{

bDrag

=

false;

oWins_title.releaseCapture

oWins_title.releaseCapture();

};

}

//

隐藏弹出层

function

popDivHidden(popDivId)

{

var

oWins

=

document.getElementById(popDivId);

oWins.style.display

=

"none";

window.parent.document.body.removeChild(window.parent.document.getElementById("maskDiv"));

}

//

获取弹出层的zIndex

function

getZindex(popDivId)

{

var

popDiv

=

document.getElementById(popDivId);

var

popDivZindex

=

popDiv.style.zIndex;

return

popDivZindex;

}

//

创建遮罩层

function

creatMask(popDivId)

{

//

参数w为弹出页面的宽度,参数h为弹出页面的高度,参数s为弹出页面的路径

var

maskDiv

=

window.parent.document.createElement("div");

maskDiv.id

=

"maskDiv";

maskDiv.style.position

=

"fixed";

maskDiv.style.top

=

"0";

maskDiv.style.left

=

"0";

maskDiv.style.zIndex

=

getZindex(popDivId)

-

1;

maskDiv.style.backgroundColor

=

"#333";

maskDiv.style.filter

=

"alpha(opacity=70)";

maskDiv.style.opacity

=

"0.7";

maskDiv.style.width

=

"100%";

maskDiv.style.height

=

(window.parent.document.body.scrollHeight

+

50)

+

"px";

window.parent.document.body.appendChild(maskDiv);

maskDiv.onmousedown

=

function()

{

window.parent.document.body.removeChild(window.parent.document.getElementById("maskDiv"));

};

}

js代码定时关闭遮罩层,小白求教Javascript代码

这是一个打开网页 30秒后自动弹出红色的遮罩层,5秒后遮罩层自动关闭。

html

    body onload="load()"

    div id="zzDiv" style="width:100%;height:100%;opacity:0.5;background-color:#ccc;display:none;position: fixed;z-index:9999;"遮罩层/div

    ndndndndnddnnd

    script type="text/javascript"

    function load(){

         setTimeout(showDiv,3000);

}

function showDiv(){

    document.getElementById("zzDiv").style.display="block";

    setTimeout(hideDiv,5000);

}

function hideDiv(){

   document.getElementById("zzDiv").style.display="none";

}

/script

/body

/html

关于移植:在你想要弹出遮罩层的页面修改。按照页面结构把对应标签的内容复制到你要修改的页面中。例如body/body的内容复制到body/body里面。再将 body 改成body onload="load()"。

js弹出的遮罩层,如何能遮住全屏?

只需5个步骤就可以解决遮住全屏的问题。

1.打开UE编辑器,创建一个空白的HTML源文件和CSS源文件,如下图。

2.在个HTML文件中输入下列HTML代码,如下图参考。

3.在CSS文件中输入以下CSS代码,如下图。

4.编辑完成后,选择UTF8-noBOM模式保存文件,如下图。

5.在浏览器中打开HTML文件,您可以看到最终想要实现的遮住全屏效果,如下图。

js遮罩层代码(js 遮罩层)

本文目录一览: 1、js弹出div并显示遮罩层 2、js代码定时关闭遮罩层,小白求教Javascript代码 3、js弹出的遮罩层,如何能遮住全屏? js弹出div并显示遮罩层 弹出div显示遮罩层的

2023-12-08
创建自定义遮罩层的实现方法-纯JS控制遮罩层样式

2023-05-16
小程序遮罩层详解

2023-05-16
Bootstrap遮罩的详解

2023-05-23
js弹出图片代码(js弹出图片代码怎么办)

本文目录一览: 1、用js脚本,怎么实现弹出选择图片的对话框,并将文件上传到服务器 2、javascript点击查看图片,弹框显示图片,怎么用js怎么实现? 3、js如何实现点击图片弹出窗口并放大这张

2023-12-08
js弹窗代码图片(js弹出图片)

本文目录一览: 1、js如何实现点击图片弹出窗口并放大这张图片,弹出的窗口有半透明遮罩层效果,弹出的窗口不跳页面? 2、javascript点击查看图片,弹框显示图片,怎么用js怎么实现? 3、js如

2023-12-08
js自动适应的图片弹窗实例(js自动适应的图片弹窗实例怎么做

本文目录一览: 1、js如何实现点击图片弹出窗口并放大这张图片,弹出的窗口有半透明遮罩层效果,弹出的窗口不跳页面? 2、javascript点击查看图片,弹框显示图片,怎么用js怎么实现? 3、js文

2023-12-08
js出现div的代码,js控制div显示

本文目录一览: 1、如何js弹出div 2、js显示和隐藏div如何修改 3、点击按钮弹出一个div,再点击按钮或点击其他区域关闭该div,javascript代码如何实现? 如何js弹出div js

2023-12-08
天正怎么遮挡图块,天正遮挡快捷键

2022-12-02
js操作css3,js操作css动画

本文目录一览: 1、如何使用js捕获css3动画 2、JS 怎么动态设置CSS3动画的样式 3、怎么用js触发css3动画 4、如何用JS和CSS3制作炫酷的弹窗效果 如何使用js捕获css3动画 C

2023-12-08
cssjs弹出框实例(js中的弹出框)

本文目录一览: 1、HTML+CSS+JS实现点击超链接弹出文本框效果 2、js+css做出弹出框 3、如何用JS和CSS3制作炫酷的弹窗效果 HTML+CSS+JS实现点击超链接弹出文本框效果 出现

2023-12-08
cad怎么让新画的图在最上层,如何把cad图层放在最上层

2023-01-08
JS弹出自定义窗口指南

2023-05-17
css特效js实例(css3网页特效)

本文目录一览: 1、如何用JS和CSS3制作炫酷的弹窗效果 2、导航条js+css特效代码怎么用 3、怎样用js触发css的过渡效果 4、如何用css,js实现如图效果 5、js+css实现文字散开重

2023-12-08
VuePop开发指南

2023-05-17
天正图块遮挡,天正图块不显示

2023-01-08
cad遮挡命令你个,cad遮盖命令怎么用

2022-12-01
java怎么锁定jsp(Java常见的锁)

本文目录一览: 1、java页面怎么取得jsp页面的值 2、锁屏. 如何把jsp页面的框架锁住 3、怎么控制jsp中java代码执行顺序 4、javaweb开发java servlet jsp是怎么解

2023-12-08
js实现侧悬浮浮动实例代码(前端 浮动)

本文目录一览: 1、求个左下角JS广告悬浮代码? 2、求一个能用的右侧浮动JS代码 3、JS网页中的浮动窗口代码? 4、浮动窗口的代码 (html/js) 求个左下角JS广告悬浮代码? 漫游于网络之间

2023-12-08
js左浮动代码,网页设计左浮动代码

本文目录一览: 1、js左浮动代码急 2、浮动窗口的代码 (html/js) 3、求高手指点,网页超过某指定的高度high后,加载运行某JS浮动广告代码,在左侧位置浮动显示的方法? js左浮动代码急

2023-12-08