Js弹窗插件的分析
2017-02-19 03:56

弹窗插件分析

弹窗插件是web页面中使用频率最高的一种插件,也是实现相对比较简单的一种插件。

弹窗插件的原理就是一个absolute或fixed定位的div,如果是页面,div中嵌套一层iframe元素承载页面。

弹窗插件有很多种展现形式,像下面这几种都属于弹窗的范畴:

@1:承载内容的弹窗:

popwin.png

@2:模拟浏览器的alert,confirm的弹窗

popwin2.png


popwin5.png

@3:右下角的弹窗

popwin3.png


popwin7.png

@4:跟随弹窗

popwin4.png


popwin8.png

popwin9.png


@5:提示弹窗

popwin6.png

pop9.png

@6:右键菜单

popwin10.png

上面这几种效果,都可以归结为弹窗插件,或者基于弹窗插件。所以我们要实现弹窗插件需要有几个参数:

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,//点击遮罩关闭弹框
};

按照这个参数的设置,写出的弹窗灵活性就很高了,就能基本应用所有的弹窗场景。






原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(1975)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1