Jquery弹出层窗口插件
前几天做工项目中有用到弹出DIV层窗口,网上找了些都感觉不合自已的要求。于是乎就自已写一Jquery弹窗插件。哎~ 其实吧这个习惯并不好,太要完美了。其实网上找些代码能用就可以了。但。。。我总心有不甘。虽然用了两天时间,总算了学了不少Jquery的东西。
网上弹窗程序代码主要问题:
1,弹窗参数过多,好多没有必要。特别是式样,可以让用户直接在CSS调节,放在参数里没什么用。
2,弹出窗口拖动时比较卡,体验太差。
3,程序回调自主性差,弹窗一般是两种,一种是提示性的,一种是输入后提交表单的。后者肯定需要自主设置回调代码,否则非常麻烦。
4,功能太杂,学习个插件也得半天,还不如自已写的条理比较清楚。
深蓝技术写的代码,就是要解决上述问题。
先给个调用方法,大家看了应该知道它的功能了
$(function () { $('#dbpop').popbind({ //宽度,高度是自适应的 Width:"400px", //显示按钮上的文字; //如果不想显示按钮,而是调用此函数时,层自动弹出,设置为null. IsShow:"弹出窗口" , //null, //窗口是否可拖动, true/false IsDrag: true, //窗口标题文字.默认值是"Open" Title: "This is 标题,拖下试试", //是否使用遮罩 IsMask:true, //是否显示"取消"按钮,需要回调时为true ExCancel: true, //这里定义,当窗口中的"确定"按钮被按下时,进行处理的函数 IsComfirm: function () { ifpopconfirm(); } }); });
HTML非常简洁,大部份UI界面都在Jquery里生成的。
<div id="divX" class="dbpop_frm"> 没有弹出窗口的按钮哦!~ </div>
在插件的代码里分别封装了三个Jquery函数,可以分开使用。调用非常方便!
三个函数分别是
浮动弹窗生成 - popbind
对象自动居中 - cnter
对象拖动 - drag
Demo演示在这里: www.dieep.com/demo/jqueryPopWin.htm