好贷网好贷款

简单易用的div弹出层

发布时间:2016-12-3 14:51:45 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"简单易用的div弹出层",主要涉及到简单易用的div弹出层方面的内容,对于简单易用的div弹出层感兴趣的同学可以参考一下。

<html> <head> <title>showdiv</title> <!--这是样式--> <style type="text/css"> .black_overlay{     display: none;     position: absolute;     top: 0%;     left: 0%;     width: 100%;     height: 100%;     background-color: gray;     z-index:1001;     -moz-opacity: 0.8;     opacity:0.5;/*透明度---取值[0.0,1.0]*/     filter:alpha(opacity=0.9); } .white_content {     display: none;     position: fixed;     top: 15%;     left: 15%;     width: 70%;     height: 400px;     padding: 1%;     border: 1px solid lightblue;     background-color: white;     z-index:1002;     min-height:400px; } .btn{     cursor:pointer; } </style> <script type="text/javascript">     //弹出隐藏层     function ShowDiv(show_div,bg_div){         document.getElementById(show_div).style.display='block';         document.getElementById(bg_div).style.display='block' ;         var bgdiv = document.getElementById(bg_div);         bgdiv.style.width = document.body.scrollWidth;         $("#"+bg_div).height($(document).height());         // bgdiv.style.height = $(document).height();     }     //关闭弹出层     function CloseDiv(show_div,bg_div)     {         document.getElementById(show_div).style.display='none';         document.getElementById(bg_div).style.display='none';     }; </script> <body>     <!-- 触发按钮 -->     <a onclick="ShowDiv('mainProduct','fade')" class="btn">Open</a>     <!-- 显示内容部分 -->     <div id="fade" class="black_overlay">这是遮挡层</div>     <div id="mainProduct" class="white_content">         ------填内容-----部分--------可以是表单哦         <div class="main" style="width:100%;height:350px;overflow-y:scroll;overflow-x:hidden;border:1px solid gray;">                 中间部分<br/>         </div>         <div class="bottom" style="text-align: right; margin-bottom:5px;">             <a class="btn" onclick="javascript:saveMainPro();">Save</a>             <a class="btn" onclick="CloseDiv('mainProduct','fade')">Cancel</a>         </div>     </div> </body> </html>

上一篇:POJ 2653 Pick-up sticks 计算几何 线段相交
下一篇:可拖动的div

相关文章

相关评论