无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 公司新闻 >

大众号小程序有什么用_前端js弹出框组件使用方

时间:2021-01-12 16:12来源:大众号小程序有什么用 作者:jianzhan 点击:
前端开发js弹出来框部件应用方式 本文关键为大伙儿详尽详细介绍了前端开发js弹出来框部件的应用方式,原文中实例编码详细介绍的十分详尽,具备一定的参照使用价值,很感兴
前端js弹出框组件使用方法       这篇文章主要为大家详细介绍了前端js弹出框组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

下面分享一个js 弹出窗, 分 toast , dialog , load 三种弹窗 , 下面用js css 来实现以下:

首先是js代码 | 采用了 es6 的写法

//公共弹窗加载动画
const DIALOG_TOAST = '1',
 DIALOG_DIALOG = '2',
 DIALOG_LOAD = '3',
class Dialog {
 constructor(type = DIALOG_DIALOG,
 dialogContent = '请求失败',
 wrapClassName = 'common-dialog-wrap',
 dialogWrapClassName = 'common-dialog-content-wrap',
 contentClassName = 'common-dialog-content',
 btnClassName = 'common-btn',
 btnContent = '确定') {

this.dialog.className = wrapClassName; this.figure = document.createElement('figure'); this.figure.className = 'common-loadGif'; this.img = document.createElement('img'); this.img.src = getAbsolutePath() + '/fenqihui/static/bitmap/travel/loadgif.gif'; this.figure.appendChild(this.img); this.dialog.appendChild(this.figure); } else if (type == DIALOG_DIALOG) { this.dialog = document.createElement('div'); this.dialog.className = wrapClassName; this.dialogWrap = document.createElement('div'); this.dialogWrap.className = dialogWrapClassName; ent = document.createElement('p'); ent.innerHTML = dialogContent; ent.className = contentClassName; this.confirmButton = document.createElement('p'); this.confirmButton.innerHTML = btnContent; this.confirmButton.className = btnClassName; this.dialogWrap.appendChild(ent); this.dialogWrap.appendChild(this.confirmButton); this.dialog.appendChild(this.dialogWrap); this.bindEvent();
document.querySelector('body').appendChild(this.dialog); $(this.dialog).css('display', 'block'); if (this.type == DIALOG_TOAST) { setTimeout(()= { $(this.dialog).css('display', 'none'); }, time); hide() { $(this.dialog).css('display', 'none');

css 文件如下:

/*公共弹窗*/
.common-dialog-wrap {
 position: fixed;
 background: rgba(0,0,0,.7);
 z-index: 100;
 height: 100%;
 width: 100%;
 top: 0;
.common-dialog-content {
 height: 2rem;
 border-bottom: 1px solid #ccc7c7;
 line-height: 2rem;
 text-align: center;
 font-size: .65rem;
.common-btn {
 text-align: center;
 height: 2rem;
 color: orange;
 line-height: 2rem;
.common-dialog-content-wrap{
 background: #fff;
 width: 10rem;
 height: 4rem;
 border-radius: 5px;
 position: fixed;
 left: 0;
 top:0;
 right: 0;
 bottom: 0;
 margin: auto;
/*吐司样式*/
.common-toast{
 height: 1.6rem;
 width: 4rem;
 box-sizing: content-box;
 color: #fff;
 padding: 0 10px;
 position: fixed;
 left: 0;
 top:0;
 bottom: 0;
 right: 0;
 text-align: center;
 line-height: 1.6rem;
 margin: auto;
 background: rgba(0,0,0,.7);
 border-radius: 2rem;
.common-loadGif{
 height: 4rem;
 width: 4rem;
 position: fixed;
 top:0;
 left: 0;
 bottom: 0;
 right: 0;
 margin: auto;
.common-loadGif img{
 height: 100%;
 width: 100%;
 border-radius: 10px;

使用方式

new Dialog(DIALOG_DIALOG).show() | hide()
new Dialog(DIALOG_LOAD).show() | hide()
new Dialog(DIALOG_TOAST).show(time : number) | hide()

效果如下

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


(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信