半透明遮罩效果 DIV

1、用JS判断你的显示器分辨率：
var iWidth = window.screen.availWidth;
var iHeight = window.screen.availHeight;
，获取长与宽两个参数，将这两个参数赋给第二层的Div，作为他的长与宽的像素值，这样的话，无论在多大或多小的显示器上，都可以显示同样的效果

2、CSS样式表：这种方法，只能提前设置好遮罩层的长与宽了，但是就会出现一些问题：如果你的遮罩层设置的宽度、长度很大，那么在小显示器上就会出现浏览器的滚动条～～反之则会出现遮罩不上的问题

因为做HTML模型，所以我用的第二种方法，有个不太合理解决的方式：我把浏览器的下方（横向的）滚动条给禁用掉了。代码是：在CSS样式表中写入 html,body { overflow-x:hidden;}

【遮罩层样式】
注意几点就行了：
1、三个Div层的样式，position都要设为absolute;，因为只有设为absolute时， z-index：属性才会生效！

2、半透明属性：filter:alpha(opacity=50); IE专有属性，设置层的透明度为 50% ，
                            -moz-opacity:0.5;    火狐FF 专有属性，设置层的透明度为 50%。
        这两条属性都要加上，因为IE、火狐对其中的单一一条并不兼容～～～
还有一点，你的遮罩层样式中，一定要设置 width 与 height   ，否则透明属性不起效～～

3、 z-index：的顺序， z-index：属性的值越小，则该层越在下方，最小值是1

【动作】
最后，在按钮onclick 的时候，写JS 将两个层显示出来就行了：
<input class="crmButton" type="button" value=" 搜索 " οnclick="javascript:document.getElementById('apDiv1').style.display='';
document.getElementById('apDiv2').style.display=''" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css">  </style> </head> <body> <div id="main"> <input name="button" type="button" class="bton pointer" value="请选择" οnclick="openBg(1);openSelect(1)"/> <input name="button" type="button" class="bton pointer" value="查看" οnclick="chakan();"/> <div id="result"> <div class="tit bgc_eee"> <h2>您已选择的城市汇总</h2> </div> <div class="cont" id="makeSureItem"> <div > <input type="checkbox" name="ck01" value="全部" checked="checked" disabled="disabled" >全部 </div> </div> </div> </div> <div id="bg"> </div> <div id="selectItem" class="hidden"> <div class="tit bgc_ccc move" οnmοusedοwn="drag(event,this)"> <h2 class="left">请选择城市</h2> <span class="pointer right" οnclick="openBg(0);openSelect(0);">[取消]</span> <span class="pointer right" οnclick="makeSure();">[确定]</span> </div> <div class="cls"></div> <div class="cont"> <div id="selectSub"> <input type="checkbox" name="ck00" οnclick="addPreItem(this)" value="全部1"/>全部 <input type="checkbox" name="ck00" οnclick="addPreItem(this)" value="北京"/>北京 <input type="checkbox" name="ck00" οnclick="addPreItem(this)" value="福建"/>福建 <input type="checkbox" name="ck00" οnclick="addPreItem(this)" value="四川"/>四川 <input type="checkbox" name="ck00" οnclick="addPreItem(this)" value="江苏"/>江苏 </div> </div> <div id="preview"> <div class="tit bgc_eee c_999"> <h2>您已选择的城市</h2> </div> <div class="cont" id="previewItem"> </div> </div> </div> <script type="text/javascript"> /* ------使用说明----- */ /* 添加城市方法：添加组：找到id 是 "selectSub"中select标签下，添加option标签 value属性递增，找到 id 是 "selectSub",按照原有格式添加div,其id属性递增添加二级傅选矿选项复制 id 是 "selectSub" 下任意input标签，粘贴在需要添加的位置。 */ var grow = $("selectSub").getElementsByTagName("option").length; //组数 var showGrow = 0;//已打开组 var selectCount = 0; //已选数量 var items = $("selectSub").getElementsByTagName("input"); //alert(maxItem); //var lenMax = 2; //alert(1); function $(o){ //获取对象 if(typeof(o) == "string") return document.getElementById(o); return o; } function openBg(state){ //遮照打开关闭控制 if(state == 1) { var iWidth = window.screen.availWidth; var iHeight = window.screen.availHeight; $("bg").style.display = "block"; $("bg").style.position = "absolute"; // $("bg").style.zIndex = "1"; $("bg").style.width = iWidth; $("bg").style.height = iHeight; // document.documentElement.style.overflow='hidden'; //$("bg").style.top = "0px"; // $("bg").style.left = "0px"; // $("bg").style.background = "#000"; // $("bg").style.filter = "alpha(opacity=40)"; // $("bg").style.opacity = "0.40"; var h = document.body.offsetHeight > document.documentElement.offsetHeight ? document.body.offsetHeight : document.documentElement.offsetHeight; //alert(document.body.offsetHeight); //alert(document.documentElement.offsetHeight); // $("bg").style.height = h + "px"; } else { $("bg").style.display = "none"; } } function openSelect(state){ //选择城市层关闭打开控制 if(state == 1) { $("selectItem").style.display = "block"; $("selectItem").style.left = (document.body.clientWidth - $("selectItem").style.width)/2 + "px"; $("selectItem").style.top = document.body.scrollTop + 100 + "px"; } else { $("selectItem").style.display = "none"; } } function addPreItem(select1){ $("previewItem").innerHTML = ""; if(select1.value=='全部1'){ if(select1.checked==true){ for(var i = 1 ; i < items.length ; i++){ items[i].checked = false; items[i].disabled = "disable"; } var allmes = "<input type='checkbox' checked='true' value='"+ items[0].value +"' οnclick='copyItem(/"previewItem/",/"previewItem/");same(this);'>" + items[0].value; $("previewItem").innerHTML += allmes; return; } else{ for(var i = 1 ; i < items.length ; i++){ //items[i].checked == false; items[i].disabled = false; } return; } } var len　= 0 ; for(var i = 0 ; i < items.length ; i++) { if(items[0].checked == true){ } if(items[i].checked == true) { //len++; //if(len > lenMax) //{ // alert("不能超过" + lenMax +"个选项！") // return false; //} var mes = "<input type='checkbox' checked='true' value='"+ items[i].value +"' οnclick='copyItem(/"previewItem/",/"previewItem/");same(this);'>" + items[i].value; $("previewItem").innerHTML += mes; //alert(items[i].value); } } } function makeSure(){ //alert(1); //$("makeSureItem").innerHTML = $("previewItem").innerHTML; openBg(0); openSelect(0); copyItem("previewItem","makeSureItem") } function copyHTML(id1,id2){ $(id2).innerHTML = $("id1").innerHTML; } function copyItem(id1,id2){ var mes = ""; var items2 = $(id1).getElementsByTagName("input"); for(var i = 0 ; i < items2.length ; i++) { if(items2[i].checked == true) { mes += "<input type='checkbox' checked='true' disabled value='"+ items2[i].value +"' οnclick='copyItem(/"" + id2+ "/",/""+ id1 +"/");same(this);'>" + items2[i].value; } } $(id2).innerHTML = ""; $(id2).innerHTML += mes; //alert($(id2).innerHTML); } function chakan(){ var c= $(previewItem).getElementsByTagName("input"); for(var i = 0;i<c.length;i++){ if(c[i].checked ==true){ alert(c[i].value) } } } function same(ck){ for(var i = 0 ; i < items.length ; i++) { if(ck.value == items[i].value) { items[i].checked = ck.checked; } } } /* 鼠标拖动 */ var oDrag = ""; var ox,oy,nx,ny,dy,dx; function drag(e,o){ var e = e ? e : event; var mouseD = document.all ? 1 : 0; if(e.button == mouseD) { oDrag = o.parentNode; //alert(oDrag.id); ox = e.clientX; oy = e.clientY; } } function dragPro(e){ if(oDrag != "") { var e = e ? e : event; //$(oDrag).style.left = $(oDrag).offsetLeft + "px"; //$(oDrag).style.top = $(oDrag).offsetTop + "px"; dx = parseInt($(oDrag).style.left); dy = parseInt($(oDrag).style.top); //dx = $(oDrag).offsetLeft; //dy = $(oDrag).offsetTop; nx = e.clientX; ny = e.clientY; $(oDrag).style.left = (dx + ( nx - ox )) + "px"; $(oDrag).style.top = (dy + ( ny - oy )) + "px"; ox = nx; oy = ny; } } document.onmouseup = function(){oDrag = "";} document.onmousemove = function(event){dragPro(event);} </script> </body> </html>

半透明遮罩效果 DIV相关推荐

jquery 半透明遮罩效果小结
最近偏离学术的道路越来越远了!! 今天要小结的是实现一个半透明遮罩效果.点击页面上的一个按钮,立即在屏幕的正中央显示某个部件,并且在这个部件之外的区域像是蒙上了一层半透明的遮罩.点击遮罩区域,该正中央 ...
为图片添加半透明遮罩效果
平时为图片添加半透明遮罩效果,我的做法如下: 利用标签i实现背景半透明遮罩.当鼠标hover时, 提高i的背景色透明度值background-color: rgba(0, 0, 0, .6) < ...
QT 轻松实现半透明遮罩效果
一.背景有时候我们需要实现下面的半透明遮罩效果,以便突出子窗口. 二.实现原理 1.总共分为三层:主窗口(Form).遮罩.显示窗口. 2.主窗口的子窗口是遮罩,遮罩的子窗口是显示窗口. 3.遮罩设 ...
C#实现winform仿div+css半透明遮罩效果
本文实现在winform项目实现网页div+css关透明效果,挺帅的,在网页中要实现div的半透明遮罩层效果不难,在winform项目就不是这么容易了,下面我们来看下效果图先: 正常时: 文章来自 ...
用div层来实现页面半透明遮罩效果
实现效果: 弹出一个窗口的时候,窗口后面的页面变暗,并且不能操作难点: 因为div 层是不能把select控件遮住的,所以要特殊处理,方法两种,一种是在弹出窗口下面加一层iframe来遮住selec ...
CSS半透明遮罩层 and 定位
html  <div class="mask" style="display: none;"></d ...
C#实现Winform自定义半透明遮罩层
在网页中通过div+css实现半透明效果不难,今天我们看看一种在winfrom中实现的方法: 效果图如下,正常时: 显示遮罩层时: 自定义遮罩层控件的源码如下: View Code using Sys ...
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操 ...
android 背景图遮罩,通过css使用background-color为背景图添加遮罩效果
一个div同时设置background-color和background-image的话,color是处于img层下方的,无法实现遮罩效果,所以需要再创建一个div作为其子div,然后设置子div的背 ...

半透明遮罩效果 DIV

半透明遮罩效果 DIV相关推荐

最新文章

热门文章