zoukankan      html  css  js  c++  java
  • js弹出遮罩层

    js弹出层,并且遮罩下面内容, [ 注意,这里button为input其中的一种类型,不要换]

    <!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>
    <title>点击弹出居中的遮罩层代码</title>
    <meta http-equiv="content-type" content="text/html;charset=gb2312">
    <style type="text/css">
    .hidden{display:none;}
    #smallLay{498px; height:100px;padding:4px 10px 10px;background-color:#FFFFFF;border:1px solid #05549d;color:#333333;line-height:24px;text-align:left;-webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:3px 3px 6px #555;}
    </style>
    <script type="text/javascript">
    function showid(idname){
    var isIE = (document.all) ? true : false;
    var isIE6 = isIE && ([/MSIE (d).0/i.exec(navigator.userAgent)][0][1] == 6);
    var newbox=document.getElementById(idname);
    newbox.style.zIndex="9999";
    newbox.style.display="block"
    newbox.style.position = !isIE6 ? "fixed" : "absolute";
    newbox.style.top =newbox.style.left = "50%";
    newbox.style.marginTop = - newbox.offsetHeight / 2 + "px";
    newbox.style.marginLeft = - newbox.offsetWidth / 2 + "px"; 
    var layer=document.createElement("div");
    layer.id="layer";
    layer.style.width=layer.style.height="100%";
    layer.style.position= !isIE6 ? "fixed" : "absolute";
    layer.style.top=layer.style.left=0;
    layer.style.backgroundColor="#000";
    layer.style.zIndex="9998";
    layer.style.opacity="0.6";
    document.body.appendChild(layer);
    var sel=document.getElementsByTagName("select");
    for(var i=0;i<sel.length;i++){       
    sel[i].style.visibility="hidden";
    }
    function layer_iestyle(){     
    layer.style.width=Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth)
    + "px";
    layer.style.height= Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) +
    "px";
    }
    function newbox_iestyle(){     
    newbox.style.marginTop = document.documentElement.scrollTop - newbox.offsetHeight / 2 + "px";
    newbox.style.marginLeft = document.documentElement.scrollLeft - newbox.offsetWidth / 2 + "px";
    }
    if(isIE){layer.style.filter ="alpha(opacity=60)";}
    if(isIE6){ 
    layer_iestyle()
    newbox_iestyle();
    window.attachEvent("onscroll",function(){                             
    newbox_iestyle();
    })
    window.attachEvent("onresize",layer_iestyle)         

    layer.onclick=function(){newbox.style.display="none";layer.style.display="none";for(var i=0;i<sel.length;i++){
    sel[i].style.visibility="visible";
    }}
    }
    </script>
    </head>
    <body>
    <input type="button" id="showbtn" name="showbtn" value="点我弹出层" onclick="showid('smallLay');">
    <div id="smallLay" style="display:none;"></div>
    </body>
    </html>

    代码参考自http://www.codefans.net/jscss/code/2312.shtml  经试验帮了我忙,抄下来,备忘

  • 相关阅读:
    任务五:基础JavaScript练习(二)
    任务四:基础JavaScript练习(一)
    JS判断一个对象为空对象
    任务三:零基础JavaScript编码(三)
    任务二:零基础JavaScript编码(二)
    任务一:零基础JavaScript编码(一)
    Jquery点击按钮 异步和同步提交表单
    2019 Google 开发者大会直播完整版
    Android 10 开发亮点有哪些?
    2019Android多线程面试总结
  • 原文地址:https://www.cnblogs.com/ZQiuMei/p/3469911.html
Copyright © 2011-2022 走看看