js自定义框架插件的封装

弹出层提示，这是移动前端开发中最常见的需求。你可能会想到一些流行的弹出式插件，比如经典的artDialog酷炫的Sweetalert等等.

但是慢慢的，你其实会发现定制的要求通常都很高，一般的shell插件可能只能满足大部分的需求。最好是手工打包一个符合自己开发习惯的shell组件，这样后续的开发效率会大大提高。

首先梳理一下思路，原生javascript其实有实现alert()的方法，但那会暂时中断程序的运行，让你变丑！所以抛开这些仔细想想，其实子弹盒是两个div层，一个蒙版层(mask layer)浮在下面，覆盖所有元素，最好是半透明的。另一个是弹性框架的主要部分，通常需要水平和垂直居中，通常包含一个标题，主要内容需要自定义。如果是模态框架，通常会有一个确认/取消按钮。最后，弹出和关闭时还有一些动态效果。

所以你可以自己打包一个，放在项目的公共js中。如果可以自己写，尽量不要用插件.

一些默认属性值

通过foreach循环，类似于继承defaultOpts属性的传入opts，在调用项目符号框之前执行的before()方法相当于一些准备工作

Var default opts={title : ' '，//title content: ' '，//content text | | html height : 50，//默认屏幕(父级)50% width: 80，//默认屏幕(父级)80% type: 'alert-default '，//帧类型effect3360 '淡入'，//效果出现，默认情况下，延迟时间： 500被丢弃。//效果延迟时间默认为5s autoClose: false。//自动关闭autoTime: 2000，//自动关闭时间默认为2s autoEffect: 'default '，//关闭效果ok:' ok '，ok回调3360 function () {}，//确认回调cancel:' cancel '，Cancel back : function(){ }，//取消回调before 3360 function(){ console . log(' before ')}，close 3360 function(){ console . log(' close ')}，Blankclose:

定义一个数组对象，在其中播放项目符号框的dom元素，警报蒙版是全屏的蒙版层，警报内容是项目符号框的主要内容区域。最后，数组被。join(')函数，然后通过jquery的append()方法追加到主体节点的末尾。

var alerthml=[' section class=' alert-main ' id=' alert main ' '，' Div class=' alert-mask Li-不透明度' id='alertMask'/div '，Div class=' alert-content' opts。类型' ' id=' alertcontent ' '，选择。content'/div '，'/section'] $ ('body ')。追加(alertml。join(“”)设置高度和宽度，水平和垂直居中。

我这里用的是固定定位，那么高度就是入局高度(百分比)，屏幕顶部到顶部的距离百分比是100——入局高度/2，这样就实现了垂直居中，宽度也是一样。这种横纵对中的方法也是我长期实践总结出来的。我觉得是最简单最实用的，兼容各种屏幕尺寸。当然有很多方法可以自己尝试

var $ alert content=$(' # alert content ')，$ alert min=$(' # alert min ')；$ alertcontent . CSS({ ' height ' : opts . height ' % '，' top': (100 - opts.height)/2 '% '，' width': opts.width '% '，' left' :的最后一句话(100 - opts。width)/2“%”})$(”。“不透明度”。CSS({ '-WebKit-animation-duration ' : opts.delayTime/1000's'})是给蒙版层一个动画执行的淡入时间。有关详细信息，请参见下面的CSS @-WebKit-关键帧不透明度

弹性框架效应

我这里实现了四个效果，分别是渐显跌落左侧从左侧飞入规模放大，信息提示信息。可以看到，我是定义了一个集合对象，分别放置了对应的钢性铸铁属性，然后通过两个setTimeout函数统一赋值

var effect={ 'fadeIn': 'top '，' fadeInStart': '-100% '，' fadeInValue ' :(100-opts。高度)/2“%”、“side left”:“left”、“side left start”:“-100%”、“side left value”:(100-opts。width)/2 ' % '，' scale ' 3360 '-web kit-transform '，' scale start ' add class(' alert-show ')setTimeout(function(){ $ alert content。CSS(效果[opts。效果]，效果[选项。效果“值”])选择。近距离选择。close()}，10) }，opts.delayTime)空白处点击关闭

通常情况下的需求，都会是要点击弹框空白处关闭弹框，一个点击事件搞定，重点是前面的选择器，jquery给了我们太多方便.当然最后为了防止点击到页面其他元素，阻止事件冒泡，组件默认行为.

if(opts.blankclose) { $(' .alert-main :not(.alert-content)').on('click '，function(event){ $ alert min。移除()选项。近距离选择。close()事件。stopperpagation()事件。preventdefault()})自动关闭

当自动丢失为没错，并且自动时间大于零时，用一个延时事件自动关闭弹框

if(opts。autoclose选项。auto time 0){ setTimeout(function(){ $ alert min。remove()}，opts。自动时间)选项。近距离选择。close()}演示：

钢性铸铁

@-网络套件-关键帧不透明度{ 0% { opa city 3360 0；/*初始状态透明度为0 */} 50% { opa city 3360 0；/*中间状态透明度为0 */} 100% { opa city 3360 1；/*结尾状态透明度为1*/} } .李不透明度{-网络工具包-动画-名称：不透明度；/*动画名称*/-网络套件-动画-迭代-计数： 1；/*动画次数*/-网络套件-动画-延迟：/*延迟时间*/} .警报屏蔽{位置：固定；高度： 100%;宽度： 100%;左侧： 0%;前：名0%；z指数： 9998；背景-color: rgba(0，0，0，7);} .警报内容{位置：已修复；盒子尺寸：边框盒子；边界半径： 4pxz指数： 9999；-网络套件-transit :4s；-蚊子-交通：4s；transition : 4 display :无；} .alert-show { display : }块；} .警报-默认{背景色：白色；}html

p class=' alert ' data-flag=' fadeIn ' fadeIn/PP class=' alert ' data-flag=' side left ' side left/PP class=' alert ' data-flag=' scale ' scale/PP class=' alert ' data-flag=' info ' info/p js

要求。config({ jquery : ' component/jquery/jquery-3。1 .0 .min '，Lialer : ' Li/Li-alert '，//常用弹框组件})要求(['jquery']，函数($){要求(['liAlert']，函数(){ $(')。警报').on('click '，function(event){ $).alert({ content : ' h1 style=' display : flex；正义-内容：中心；'我是弹框/h1 '，效果： $(事件。当前目标).attr('data-flag ')，blankclose: true，//autoClose: true }) }) })效果图

完整的代码已上传https://github.com/helijun/component/tree/master/alert

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。