本文目录
- 大神，JS的图片遮罩效果怎么做
- js 做一个 类似 遮罩的效果
- JS 创建遮罩层，实现以下功能，求大神帮助，谢谢！
- JS怎么创建一个遮罩层将整个页面都遮盖住
- js弹出div并显示遮罩层
- 遮罩层在滚动条的上面怎么用js设置 像QQ邮箱删除一样
- js遮罩窗体怎么做
- 怎么用js做出，点击一个按钮,弹出一个遮罩层,5秒后自己关闭.的效果
大神，JS的图片遮罩效果怎么做
遮罩层的CSS #mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, .3); z-index: 99999;}在传统浏览器中，不支持rgba的写法。
js 做一个 类似 遮罩的效果
//点击其它位置除文本框关闭$(document).click(function(e){ if($(e.target).is(".div1,.div2")){ return false; } $(".div1").hide();});//div2 点击该div出现菜单div1//div1 那个菜单
JS 创建遮罩层，实现以下功能，求大神帮助，谢谢！
你自己再把样式改改吧，就可以了。《script》var docEle = function() { return document.getElementById(arguments) || false;}function openNewDiv(_id) { var m = "mask"; if (docEle(_id)) document.removeChild(docEle(_id)); if (docEle(m)) document.removeChild(docEle(m)); // 新激活图层 var newDiv = document.createElement("div"); newDiv.id = _id; newDiv.style.position = "absolute"; newDiv.style.zIndex = "9999"; newDiv.style.width = "300px"; newDiv.style.height = "300px"; newDiv.style.top = "100px"; newDiv.style.left = (parseInt(document.body.scrollWidth) - 300) / 2 + "px"; // 屏幕居中 newDiv.style.background = "#EFEFEF"; newDiv.style.border = "1px solid #860001"; newDiv.style.padding = "5px"; newDiv.innerHTML = "id:luckystar 《select》《option value=’1’》aaaaaaaaa《/option》《option value=’2’》bbbb《/option》《option value=’c’》ccccccccc《/option》《/select》《br》《br》《br》《br》《br》《br》《br》"; document.body.appendChild(newDiv); // mask图层 var newMask = document.createElement("div"); newMask.id = m; newMask.style.position = "absolute"; newMask.style.zIndex = "1"; newMask.style.width = document.body.scrollWidth + "px"; newMask.style.height = document.body.scrollHeight + "px"; newMask.style.top = "0px"; newMask.style.left = "0px"; newMask.style.background = "#000"; newMask.style.filter = "alpha(opacity=40)"; newMask.style.opacity = "0.40"; document.body.appendChild(newMask); // 跳转到其他页面 var otherPage = document.createElement("button"); otherPage.onclick=function() {***隐藏网址*** }; otherPage.value = ’跳转’; // 关闭mask和新图层 var newA = document.createElement("button"); //newA.href = "#"; newA.value = "关闭激活层"; newA.onclick = function() { document.body.removeChild(docEle(_id)); document.body.removeChild(docEle(m)); return false; } newDiv.appendChild(newA); newDiv.appendChild(otherPage);}《/script》《body》《a href="#" _fcksavedurl="#" onclick="openNewDiv(’newDiv’);return false;"》激活新层《/a》《p》网页内容网页内容网页内容《/p》《p》网页内容网页内容网页内容《/p》《p》网页内容网页内容网页内容《/p》《p》网页内容网页内容网页内容《/p》《p》网页内容网页内容网页内容《/p》《p》网页内容网页内容网页内容《/p》《p》网页内容网页内容网页内容《/p》《p》网页内容网页内容网页内容《/p》《p》网页内容网页内容网页内容《/p》《p》网页内容网页内容网页内容《/p》《p》网页内容网页内容网页内容《/p》《p》网页内容网页内容网页内容《/p》《p》网页内容网页内容网页内容《/p》《p》网页内容网页内容网页内容《/p》《p》网页内容网页内容网页内容《/p》《p》网页内容网页内容网页内容《/p》《p》网页内容网页内容网页内容《/p》《p》网页内容网页内容网页内容《/p》《/body》
JS怎么创建一个遮罩层将整个页面都遮盖住
你这个应该是由于iframe的原因吧，建议使用top访问顶层页面，然后在顶层页面加入这个遮罩层试试。
js弹出div并显示遮罩层
弹出div显示遮罩层的效果，想必大家都有见到过吧，下面有个示例，大家可以参考下 代码如下://--------------------弹出层------------------- //popDivId:弹出层div的ID //dragDivId:用于拖动div的ID //isShowMask:是否显示遮罩层 functionpopDivShow(popDivId,dragDivId,isShowMask){ if(isShowMask){ creatMask(popDivId); } varoWins=document.getElementById(popDivId); varoWins_title=document.getElementById(dragDivId); varbDrag=false; vardisX=disY=0; oWins.style.display="block"; oWins_title.onmousedown=function(event){ varevent=event||window.event; bDrag=true; disX=event.clientX-oWins.offsetLeft; disY=event.clientY-oWins.offsetTop; this.setCapture&&this.setCapture(); returnfalse; }; document.onmousemove=function(event){ if(!bDrag) return; varevent=event||window.event; variL=event.clientX-disX; variT=event.clientY-disY; varmaxL=document.documentElement.clientWidth-oWins.offsetWidth; varmaxT=document.documentElement.clientHeight-oWins.offsetHeight; iL=iL《0?0:iL; iL=iL》maxL?maxL:iL; iT=iT《0?0:iT; iT=iT》maxT?maxT:iT; oWins.style.marginTop=oWins.style.marginLeft=0; oWins.style.left=iL+"px"; oWins.style.top=iT+"px"; returnfalse; }; document.onmouseup=window.onblur=oWins_title.onlosecapture=function(){ bDrag=false; oWins_title.releaseCapture&&oWins_title.releaseCapture(); }; } //隐藏弹出层 functionpopDivHidden(popDivId){ varoWins=document.getElementById(popDivId); oWins.style.display="none"; window.parent.document.body.removeChild(window.parent.document.getElementById("maskDiv")); } //获取弹出层的zIndex functiongetZindex(popDivId){ varpopDiv=document.getElementById(popDivId); varpopDivZindex=popDiv.style.zIndex; returnpopDivZindex; } //创建遮罩层 functioncreatMask(popDivId){ //参数w为弹出页面的宽度,参数h为弹出页面的高度,参数s为弹出页面的路径 varmaskDiv=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设置 像QQ邮箱删除一样
这个无非就是你设置好了遮罩层，然后控制他的显示和隐藏啊！用js主要是控制显示和隐藏！
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;"》《script》function 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》
怎么用js做出，点击一个按钮,弹出一个遮罩层,5秒后自己关闭.的效果
《!DOCTYPE html》《html lang="en"》《head》《meta charset="UTF-8"》《title》Document《/title》《style》#cover{position: fixed;top: 0;left: 0;height: 100%;width: 100%;background-color: rgba(0,0,0,0.3);display:none;z-index:1000;}《/style》《/head》《body》《button》这是一个按钮《/button》《div id="cover"》这是一个遮罩《/div》《script》var btn=document.getElementsByTagName(’button’);btn.addEventListener(’click’,function(){var cover=document.getElementById(’cover’);cover.style.display=’block’;setTimeout(function(){cover.style.display=’none’;},5000)})《/script》《/body》《/html》
