前端射流研究…弹出框组件使用方法

下面分享一个射流研究…弹出窗，分吐司、对话、加载三种弹窗，下面用js css来实现以下：首先是射流研究…代码|采用了es6的写法

//公共弹窗加载动画const DIALOG_TOAST='1 '，DIALOG_DIALOG='2 '，DIALOG_LOAD='3 '，class Dialog {构造函数（类型=DIALOG_DIALOG，dialogContent='请求失败，包装类名='common-dialog-wrap '，dialogwrap类名='公共-对话-内容-包装'，内容类名='common-dialog-content '，btnClassName='common-btn '，btnContent='确定){ this.type=type//吐司if(type==DIALOG _ TOAST){ this。DIALOG=文档。create element(' div ')；这个。对话。NAmE=' common-toast '；这个。对话。innerhtml=dialogContent} //加载动画else if(type==DIALOG _ LOAD){ this。DIALOG=文档。create element(' div ')；这个。对话。类名=包装类名；这个。图=文档。创建元素('图')；这个。图。类名=' common-LoadGiF '；这个。img=文档。创建元素(' img ')；这个。img。src=getAbsolutePath()'/fenqihui/static/bitmap/travel/load gif。gif '；这个。图。appendchild(这个。img)；这个。对话。appendchild(这个。图)；} else if(type==DIALOG _ DIALOG){ this。DIALOG=文档。create element(' div ')；这个。对话。类名=包装类名；这个。dialogwrap=文档。创建元素(' div ')；这个。对话包装。类名=dialogwrap类名；这个。锥形内容=文档。创建元素(' p ')；这个。科内特。innerhtml=dialogContent这个。圆锥含量。类名=内容类名；这个。确认按钮=文档。创建元素(' p ')；这个。确认按钮。innerhtml=BTN内容；这个。确认按钮。类名=btnClassName这个。对话包装。appendchild(这个。锥体含量)；这个。对话包装。appendchild(这个。确认按钮)；这个。对话。appendchild(这个。对话包装)；这个。bindEvent()；} } BindEvent(){ this。确认按钮。AddEventListener(' click '，()={ this。hide()；})}显示(时间){文档。query selector(“body”).appendChild(这个。对话框)；$(this.dialog).css('display '，' block ')；如果(这个。type==DIALOG _ TOAST){ setTiME out(()={ $(this。对话).css('display '，' none ')；},时间);} } hide() { $(this.dialog).css('display '，' none ')；}}css文件如下：

/*公共弹窗*/.通用对话包装{位置：固定；背景： rgba(0，0，0，7);z指数： 100；高度： 100%;宽度： 100%;top : 0；}.常见对话内容{ height : 2 remborder-bottom : 1 px实心# ccc7c7线高： 2雷姆；文本对齐：中心；字号：65雷姆；}.common-BTN { text-align : center；高度： 2毫米颜色：橙色；线高： 2雷姆；}.公共对话框内容包装{ background: # fff宽度： 10雷姆；高度： 4半径-半径： 5px位置：固定；左： 0；top :0 right : 0；底部： 0；margin: auto}/*吐司样式*/.普通面包宽度： 4毫米；盒子大小：内容盒；color : # fffpadding : 0 10px位置：固定；左： 0；top :0 bottom : 0；右： 0；文本对齐：中心；线高： 1.6雷姆；margin : autobackground : rgba(0，0，0，7);边界半径：2雷姆；}.common-LoadGiF { height : 4 rem；宽度： 4毫米；位置：固定；top :0 left : 0；底部： 0；右： 0；margin: auto}。common-LoadGif img { height : 100%；宽度： 100%;边框半径： 10px}使用方式

新对话框show() | hide()新对话框(对话框加载).show() | hide()新对话框(DIALOG_TOAST).显示（时间：号)|隐藏()效果如下

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