自己实现一些JQuery插件-----------------------------------(二)
在网页设计的时候有时候需要在页面弹出对话框，但是JavaScript的alert框比较难看，所以我们可以自己实现类似的功能
自己看一下代码，应该挺好懂得需要jquery和jquery.easing插件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery弹出层效果</title> <script src="jquery.1.4.2-min.js" type="text/javascript"></script> <script src="jquery.easing.1.3.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: 20%; width: 60%; height: 60%; border: 5px solid lightblue; background-color: white; z-index:1002; overflow: auto; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -moz-box-shadow: 0 0 20px rgba(0,0,0,.4); -webkit-box-shadow: 0 0 20px rgba(0,0,0,.4); -box-shadow: 0 0 10px rgba(0,0,0,.4); } </style> <script type="text/javascript"> //弹出隐藏层 function ShowDiv(show_div,bg_div){ $("#"+show_div).animate({ opacity: 'show' }, {queue:false, duration:600, easing: 'jswing'}); $("#"+bg_div).animate({ height: document.body.scrollHeight, opacity: 'show' }, {queue:false, duration:600, easing: 'jswing'}); $("#"+bg_div).style.width = document.body.scrollWidth; }; //关闭弹出层 function CloseDiv(show_div,bg_div) { $("#"+show_div).animate({opacity: 'hide' }, {queue:false, duration:600, easing: 'jswing'}); $("#"+bg_div).animate({ height: document.body.scrollHeight, opacity: 'hide' }, {queue:false, duration:600, easing: 'jswing'}); }; window.onload=ShowDiv('MyDiv','fade'); </script> </head> <body> <input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')" /> <!--这是弹出层时背景层DIV--> <div id="fade" class="black_overlay"> </div> <div id="MyDiv" class="white_content"> <div style="text-align: right; height:30px;"> <a style="font-size: 16px;cursor: pointer; " onclick="CloseDiv('MyDiv','fade')">关闭</a> </div> 白强教你如何制作一个弹出层，天天开心快乐！！ </div> </body> </html>
