自己实现一些JQuery插件-----------------------------------(二)
2013-11-14 09:51
483 查看
在网页设计的时候有时候需要在页面弹出对话框,但是JavaScript的alert框比较难看,所以我们可以自己实现类似的功能
自己看一下代码,应该挺好懂得需要jquery和jquery.easing插件
自己看一下代码,应该挺好懂得需要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>
相关文章推荐
- 自己实现一些JQuery插件-----------------------------------(四)
- 自己实现一些JQuery插件-----------------------------------(三)
- 自己实现一些JQuery插件-----------------------------------(五)
- 自己实现一些JQuery插件-----------------------------------(一)
- 自己实现一些JQuery插件-----------------------------------(一)
- 编写自己的jQuery插件简单实现代码
- Java开发中网页截图的示例,采用jquery.imageaeraselect-0.9.10这个插件实现,自己详细测试过,可以使用。
- 编写自己的jQuery插件简单实现代码
- 简单实现编写自己的jQuery插件
- jQuery插件实现select下拉框左右选择_交换内容(multiselect2side) 的一些网站 (有时间整理)
- 自己动手制作jquery插件之自动添加删除行的实现
- 自己动手写插件底层篇—基于jquery移动插件实现
- 一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
- 轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
- 利用hashchange和jQuery的SinglePage插件实现单页面应用
- 使用jquery插件实现图片延迟加载技术
- jQuery插件AjaxFileUpload可以实现ajax文件上传
- 用JQuery上传插件Uploadify实现带进度条无刷新多文件上传
- jQuery相当于对 javascript二次开发,所以基于 jQuery实现的各种插件直接调用即可
- 自己动手,实现jQuery中的ImageCopper.