html页面js实现页面弹框

来源：互联网发布：hdmi网络传输器设置编辑：程序博客网时间：2024/05/21 10:52

1、按钮

<a class="button border-green button-little" onclick="javasrcipt:ShowDiv('MyDiv','fade')" >新增二级分类</a>

2、弹框内容

<!--弹出层时背景层DIV---start--><div id="fade" class="black_overlay"></div><div id="MyDiv" class="white_content"><div style="text-align: right; cursor: default; margin-top:10px;margin-bottom:10px;"><span style="font-size: 16px; margin-right: 17px; color: #56BE2D; font-weight: 600;cursor:pointer;"  onclick="CloseDiv('MyDiv','fade')">关闭</span></div><div class="itempanel" style="    margin-left: 13%;"><div class="floatleft title" style="text-align: left;">二级分类名称：</div><div class="floatleft editor" style="font-size:16px;height: 24px;line-height: 24px;"><input type="text" id="label" name="label" placeholder="请输入二级分类名称"/></div><div class="floatleft message"></div><div class="clear"></div></div><HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3); margin-top: 39px;" width="90%" color=#ddd SIZE=2><div style="margin-bottom: 23px; margin-top: 23px; margin-left: 23%;"><input type="button" class="greenbutton2" style="width: 123px;margin-left: 30px;" onclick="javasrcipt:goToAdd()" value="添加" style="width: 123px; margin-left: 20%; "><input type="button" class="greenbutton2" style="width: 123px;margin-left: 30px;" onclick="CloseDiv('MyDiv','fade')" value="取消" style="width: 123px; margin-left: 20%; "></div></div><!--弹出层时背景层DIV---end-->

3、js部分

//===================================弹框js部分 start by:songfayuan=========================================//弹出隐藏层function ShowDiv(show_div,bg_div){var scrollHeight = document.body.scrollHeight; //文档高度document.getElementById(bg_div).style.height=scrollHeight+'px';document.getElementById(show_div).style.display='block';document.getElementById(bg_div).style.display='block';};//关闭弹出层function CloseDiv(show_div,bg_div){document.getElementById("label").value = '';document.getElementById(show_div).style.display='none';document.getElementById(bg_div).style.display='none';};//关闭弹出层function CloseDiv2(){document.getElementById("MyDiv").style.display='none';document.getElementById("fade").style.display='none';};//===================================弹框js部分 end by:songfayuan=========================================

4、css部分

/* ===================================弹框css部分 start by:songfayuan========================================= */.black_overlay{display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;background-color: black;z-index:1001;-moz-opacity: 0.8;opacity:.50;filter: alpha(opacity=50);}.white_content {    display: none;    position: absolute;    top: 35%;    left: 36%;    width: 33%;    border: 2px solid #d3d3d3;    background-color: white;    z-index: 1002;/* overflow: auto; */}.white_content_small {display: none;position: absolute;top: 20%;left: 30%;width: 40%;height: 50%;border: 16px solid lightblue;background-color: white;z-index:1002;overflow: auto;}/* ===================================弹框css部分 end by:songfayuan========================================= */

5、效果图

0 0