jquery自定义插件开发之窗户的实现过程

本例子实现弹窗的效果：如果亲感觉效果还不错，请继续往下阅读。

1、jquery.show.js

/** 开发者：lzugis*开发时间：2014年6月10日* 实现功能：点击在鼠标位置显示div*版本序号：1.0 */(函数($){ $.fn.showDIV=函数（选项){ var defaults={ }；定义变量选项=$。扩展（默认值、选项);var showdiv=$(this)；定义变量关闭，标题，内容；close=$(' ')；title=$(' ')；内容=$(' ');展示区。html(" ")；showdiv.append(关闭);展示区。追加(标题)；showdiv.append(内容);很接近。html(' X ')；标题。html(选项。标题)；内容。html(选项。内容)；showdiv.css('display '，' block ')；showdiv.css('position '，' absolute ')；showdiv.css('left '，($(window)).width()-选项。宽度)/2 ' px ')；showdiv.css('top '，($(window)).height()-选项。高度)/2 ' px ')；showdiv.css('width '，选项。宽度)；showdiv.css('height '，选项。高度)；close.bind('click ')，function(){ showdiv。CSS('显示'，'无')；});};})(jQuery)；2、jquery.showdiv.css

body div { font-size :12 px文本对齐：居中；} #容器{底色： # CCCborder:1px固体# 000;宽度宽度：1024px高度：600 px} # showdiv {底色： # FF0宽度宽度：100像素高度：100 pxdisplay:nonez索引：99;}.标题{ padding:10px背景# f39 font-weight : bold；文本对齐：居中；颜色： # FFF；}.关闭{ margin:5px位置：绝对；right :0 pxtop :33600 pxpadding :5 pxcolor : # 000背景： # FFF；} .关闭：悬停{光标：指针；背景# CCC}。内容{ text-align : leftpadd :10 px } 3、demo.html

脚本类型=' text/JAVAScript ' src=' http : jquery/jquery。量滴js '/script脚本类型=' text/JavaScript ' src=' http : jquery/jquery。展示区。js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function (){ $('#show ')).bind('click '，function(evt){ var showdiv=$(' # showdiv ').showDIV({width:400，height:200，title: '我不是黄蓉，content: '我不是黄蓉英国铁路公司我不会武功英国铁路公司我只要靖哥哥英国铁路公司完美的爱情'});});});/script输入id=' show '名称=' showDiv '值='显示type='button '

以上所述是小编给大家介绍的框架自定义插件开发之窗户的实现过程，希望对大家有所帮助！同时也非常感谢大家对我们网站的支持！