jquery自定义插件——窗口的实现【示例代码】

本例子实现弹窗的效果：

1、jquery.show.js

/* * 实现功能：点击在鼠标位置显示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 : leftpadding:10px } 3、demo.html

脚本类型=' text/JAVAScript ' src=' http : jquery/jquery。量滴js /脚本脚本类型=' text/JAVAScript ' src=' http : jquery/jquery。展示区。js /脚本脚本类型='text/javascript' $(文档)。ready(function (){ $('#show ')).bind('click '，function(evt){ var showdiv=$(' # showdiv ').showDIV({ width:400，height:200，title: '我不是黄蓉，content: '我不是黄蓉溴我不会武功溴我只要靖哥哥溴完美的爱情' });});});/script INPUT id=show value=显示类型=按钮名称=showDiv实现后的效果如下：

以上这篇框架自定义插件——窗口的实现【示例代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。