jQuery点击按钮后弹出遮罩层，有封锁按钮

发布时间：2018-08-17 11:25:35 所属栏目：活动来源：站长网

导读：jQuery 点击按钮后弹出遮罩层，右上角有封锁按钮，在代码中可以配置层的大

　　jQuery点击按钮后弹出遮罩层，右上角有封锁按钮，在代码中可以配置层的巨细、笔墨，尚有遮罩层的配景致等都可以本身界说，只痛惜弹出的层不能移动，假如您想得到更强盛的jQuery遮罩层，请您行使猛火的站内搜刮成果举办搜刮。

　　为办理一些网页殊效运行后不能表现结果（譬喻：jQuery则必要革新）题目，猛火出格新增网页版演示。

　　点击查察：网页殊效

　　运行演示：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery弹出层结果</title> <meta content="网页殊效,殊效代码,jQuery,css殊效,Js代码,告白幻灯,图片切换" name="keywords" /> <meta content="jQuery弹出层结果，有封锁按钮，代码简朴易懂，你可以随意修改弹出层的参数。" name="description" /> <script src="/uploads/common/js/jquery-1.4.2.min.js" type="text/javascript"></script> <style> .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:.80; filter: alpha(opacity=80); } .white_content { display: none; position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; border: 16px solid lightblue; 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; } </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; // bgdiv.style.height = $(document).height(); $("#"+bg_div).height($(document).height()); }; //封锁弹出层 function CloseDiv(show_div,bg_div) { document.getElementById(show_div).style.display='none'; document.getElementById(bg_div).style.display='none'; }; </script> </head> <body> <input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')" />  <div id="fade" class="black_overlay"> </div> <div id="MyDiv" class="white_content"> <div style="text-align: right; cursor: default; height: 40px;"> <span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">封锁</span> </div> 今朝来说，我照旧喜好这个本身改革的弹出层。本身在项目中也用的是这个。 </div> <br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>  <div style="display:none;"> <script type="text/javascript" src="/liehuo.net/js/stat.js"></script> </div> </body> </html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提醒：可修改儿女码再运行!

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!