jq 封装弹窗提示框，自动消失，确认

自动消失：

html

<div class="hc-toast GM-none"><div class="hc-toast-text">-</div>
</div>

css

.hc-toast {position: fixed;top: 0;left: 0;width: 100%;height: 100%;/*轻提示后，可继续点击width: 1px;height: 1px;*/
}.hc-toast-text {position: fixed;top: 50%;left: 50%;box-sizing: content-box;width: fit-content;min-width: 100px;max-width: 240px;line-height: 20px;padding: 16px;box-shadow: 0 0 5px 5px rgba(4, 0, 0, 0.1);/* box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0.3em 0.3em 1em rgba(0, 0, 0, 0.3); */border-radius: 4px;background-color: rgba(0, 0, 0, 0.8);color: #fff;font-size: 15px;text-align: center;-webkit-transform: translate3d(-50%, -50%, 0);transform: translate3d(-50%, -50%, 0);
}

js，连续点击动画抖动问题

$.extend({/* 轻提示 */showToast: function(content) {if (!$(".hc-toast").is(':animated')) {$(".hc-toast-text").html(content);$(".hc-toast").stop(true, true).show().delay(1000).fadeOut(1000);} else {$(".hc-toast-text").html(content);$(".hc-toast").stop(true, true).show().delay(1000).fadeOut(1000);}}
});

使用：

$.showToast(`提示内容`)

问题注意：连续点击动画抖动问题

方案1：

这个则是会强制你的上一动画立即结束并到达动画执行结束时状态同时来运行下一次动画，会造成动画脱节不太美观，但是反应迅速

$("#elemnet").stop(true, false).animate({...},1000);

stop() 这个函数的用法。
第一个参数的意思是是否清空动画序列，也就是stop的是当前元素的动画效果还是停止后面附带的所有动画效果，默认为false，跳过当前动画效果，执行下一个动画效果；

第二个参数是是否将当前动画效果执行到最后，意思就是停止当前动画的时候动画效果刚刚执行了一般，这个时候想要的是动画执行之后的效果，那么这个参数就为true。否则动画效果就会停在stop执行的时候。

方案2：

var flag = false;
function aa() {// 动画正在执行时returnif(flag) {return}// 开始执行动画时，将标记置为：trueflag = true;$("#element").animated({"left" : "100"}, 1000, function() {// 执行完动画，重置标记flag = false;});
}

带确认的提示框：

html

<div class="hc-dialog GM-none"><div class="hc-dialog-content">-</div><div class="hc-dialog-buttons"><span class="hc-dialog-btn hc-dialog-confirm">确认</span><span class="hc-dialog-btn hc-dialog-cancel">取消</span></div>
</div>

css

.hc-dialog {z-index: 1000;position: fixed;top: 45%;left: 50%;max-width: 320px;min-width: 280px;width: 80%;overflow: hidden;font-size: 16px;background-color: #fff;border-radius: 16px;-webkit-transform: translate3d(-50%, -50%, 0);transform: translate3d(-50%, -50%, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden;-webkit-transition: 0.3s;transition: 0.3s;transition-property: all;-webkit-transition-property: opacity, -webkit-transform;transition-property: opacity, -webkit-transform;transition-property: transform, opacity;transition-property: transform, opacity, -webkit-transform;
}.hc-dialog-content {max-height: 60vh;padding: 24px;overflow-y: auto;font-size: 14px;line-height: 20px;text-align: center;word-wrap: break-word;
}.hc-dialog-buttons {display: flex;
}.hc-dialog-btn {position: relative;display: inline-block;box-sizing: border-box;width: 100%;height: 50px;line-height: 48px;margin: 0;padding: 0;font-size: 16px;text-align: center;cursor: pointer;border-top: 1px solid rgb(235, 237, 240);
}.hc-dialog-confirm {flex: 1;border-right: 1px solid rgb(235, 237, 240);color: rgb(25, 137, 250);
}.hc-dialog-cancel {flex: 1;
}

$.extend({/* 弹窗 */showDialog: function(content) {$(".hc-dialog-content").html(content);$(".hc-dialog, .hc-overlay").fadeIn(300);},hideDialog: function() {$(".hc-dialog, .hc-overlay").fadeOut(300);}
});

使用

$.showDialog(`提示内容`);
$.hideDialog();

遮罩层

html

<div class="hc-overlay GM-none"></div>

css

.hc-overlay {z-index: 999;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.4);
}

jq 封装弹窗提示框，自动消失，确认相关推荐

弹出提示框自动消失
我们在进行增.删.改.查的时候,很多时候都需要一个提示信息以表明所做操作的成功等状况.有些人喜欢用alert()来提示,这不太人性化,因为alert()弹出来的提示框必须点确定才能继续进行其它操作.我 ...
qt弹出框自动消失的悬浮提示框_QT【简单自定义弹出提示框】：非模态，数秒后自动消失...
目标效果:一个提示信息框,创建后显示提示信息,一定时间后自动消失,不阻塞原来窗口. 思路: 自定义一个控件,继承自QWidget,构造时设置定时器,时间到则自我销毁. ### 实现代码代码一共两个文 ...
html输入提示框点击确认显示内容,前端自定义确认提示框（二）
以上demo,完整案例请下载:example-MyconfirmDialog 或者访问github地址:https://github.com/Kybs0/Kybs0HtmlCssJsDemo/tree ...
php jquery 弹窗提示框,jQuery实现消息弹出框效果
本文实例为大家分享了jQuery消息弹出框的具体代码,供大家参考,具体内容如下效果图实现代码 .showMessage { padding: 5px 10px; border-radius: 5p ...
微信小程序—封装消息提示框wx.showToast()方法
封装showToast方法: /*** 消息提示框* @param {*} msg 提示的内容* @param {*} status 图标*/ function showToast(msg, stat ...
Jquery提示框效果（确认提示框）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
WinForm中实现通用的弹窗提示框
一.实现效果二.核心脚本 /*** * Title:"数据采集" 项目 * 主题:弹窗 * Description: * 功能: * 1.弹窗提示 * 2.弹窗类型 * Date ...
html 弹窗提示框,js弹出框、对话框、提示框、弹窗总结
一.JS的三种最常见的对话框//====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 functi ...
Qt5 封装toast提示框
最近做用Qt做项目,需要对用户的操作进行反馈,如密码错误之类,于是自己封装了一个Mytoast类来实现先展示效果图: mytoast.h #ifndef MYTOAST_H #define MYTO ...

jq 封装弹窗提示框，自动消失，确认

自动消失：

问题注意：连续点击动画抖动问题

带确认的提示框：

遮罩层

jq 封装弹窗提示框，自动消失，确认相关推荐

最新文章

热门文章