js弹出新的界面对话框

function show() //显示隐藏层和弹出层
            {
                var hideobj = document.getElementById("hidebg");
                hidebg.style.display = "block"; //显示隐藏层
                hidebg.style.height = document.body.clientHeight + "px"; //设置隐藏层的高度为当前页面高度
                document.getElementById("hidebox").style.display = "block"; //显示弹出层
            };

            function hide() //去除隐藏层和弹出层
            {
                document.getElementById("hidebg").style.display = "none";
                document.getElementById("hidebox").style.display = "none";
            };

 

 

 

 

<style>
   body { margin:0px;padding:0px;text-align: center;}
   #hidebg { position:absolute;left:0px;top:0px;
      background-color:#000;
      width:100%;  /*宽度设置为100%,这样才能使隐藏背景层覆盖原页面*/
      filter:alpha(opacity=60);  /*设置透明度为60%*/
      opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
      display:none; /* http://www.jb51.net */
      z-Index:2;}
   #hidebox { position:absolute;width:400px;height:300px;top:200px;left:30%;background-color:#fff;display:none;cursor:pointer;z-Index:3;}
   #content { text-align:center;cursor:pointer;z-Index:1;}
</style>

 

 

 

       <div id="hidebg"></div>
            <div id="hidebox" onClick="hide();">点击关闭</div>
            <div id="content" onClick="show();">点击试试</div>

 

posted @ 2017-08-14 14:17  唐尧  阅读(5296)  评论(0编辑  收藏  举报