半透明遮罩效果 DIV

最新推荐文章于 2023-12-08 16:42:56 发布

quechao123

最新推荐文章于 2023-12-08 16:42:56 发布

阅读量5.4k

点赞数

文章标签： div function input class button html

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>

quechao123

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
半透明遮罩效果 DIV

1、用JS判断你的显示器分辨率：var iWidth = window.screen.availWidth; var iHeight = window.screen.availHeight; ，获取长与宽两个参数，将这两个参数赋给第二层的Div，作为他的长与宽的像素值，这样的话，无论在多大或多小的显示器上，都可以显示同样的效果2、CSS样式表：这种方法，只能提前设置好遮罩层的长与宽了，但是就
复制链接

扫一扫