弹窗插件是web页面中使用频率最高的一种插件,也是实现相对比较简单的一种插件。
弹窗插件的原理就是一个absolute或fixed定位的div,如果是页面,div中嵌套一层iframe元素承载页面。
弹窗插件有很多种展现形式,像下面这几种都属于弹窗的范畴:
@1:承载内容的弹窗:
@2:模拟浏览器的alert,confirm的弹窗
@3:右下角的弹窗
@4:跟随弹窗
@5:提示弹窗
@6:右键菜单
上面这几种效果,都可以归结为弹窗插件,或者基于弹窗插件。所以我们要实现弹窗插件需要有几个参数:
var defaults={ close:function(){},//关闭的回调, init:function(){},//弹窗打开时的回调, context:"",//弹窗的内容 startloc:function(){},//开始的位置状态, endloc:function(){},//结束的位置状态, mask:true,//是否有模态遮罩, maskState:function(){},//模态遮罩的样式, titlebar:function(){},//弹窗头部设置。 width:null,//弹窗宽度, height:null,//弹窗高度, minWdith:100,//初始化宽度, minHeight:100,//初始化高度。 skin:"normal",//弹窗的皮肤, maskClose:true,//点击遮罩关闭弹框 };
按照这个参数的设置,写出的弹窗灵活性就很高了,就能基本应用所有的弹窗场景。