JavaScript：原生js写的一个多按钮Popover 弹出框

效果如图

需求：点击按钮弹出，如果不进行其他操作则弹出层延时消失，点击另一个按钮时清楚其他弹窗

思路：先完成一个具有弹出层的按钮的样式，使用伪元素定位到按钮上方，加入定时器使其自动消失，当点击另一个按钮时重置定时器并移除弹窗节点

HTML参考

<div><a class="download-btn ios" id="ios" href="javascript:;" target="_blank"><img class="download-icon" src="/static/hl/images/icon_ios.svg" alt="ios">iPhone</a><a class="download-btn android" id="android" href="javascript:;"><img class="download-icon" src="/static/hl/images/icon_android.svg" alt="android">Android</a>
</div>

样式参考

 .toast-pc {position: absolute;width: 176px;line-height: 37px;font-size: 16px;font-weight: 400;color: #fff;background: rgba(0, 0, 0, .72);top: -50px;left: 50%;border-radius: 6px;transform: translate(-50%, 0);&::after {position: absolute;bottom: -8px;left: 50%;border-top: 8px solid rgba(0, 0, 0, .72);border-right: 8px solid transparent;border-left: 8px solid transparent;content: '';transform: translate(-50%, 0);}}

JS内容

// 储存定时器
let t;// 弹窗函数
function Toast(msg, duration, fatherId) {duration = Number.isNaN(duration) ? 3000 : duration;const m = document.createElement('div');m.innerHTML = msg;clearTimeout(t);let toast = document.getElementsByClassName('toast');if (toast.length > 0) {for (let i = 0; i < toast.length; i += 1) {toast[i].parentNode.removeChild(toast[i]);}}m.classList.add('toast-pc', 'toast');document.getElementById(fatherId).appendChild(m);setTimeout(() => {const d = 0.5;// 展示指定时间后的渐隐效果m.style.transition = `-webkit-transform ${d}s ease-in, opacity ${d}s ease-in`;m.style.opacity = '0';// 时间结束后移除弹窗节点t = setTimeout(() => {toast = document.getElementsByClassName('toast');if (toast.length > 0) {for (let i = 0; i < toast.length; i += 1) {toast[i].parentNode.removeChild(toast[i]);}}}, d * 1000);}, duration);
}window.onload = () => {// 绑定点击事件document.getElementById('ios').onclick = () => {Toast('即将上线，敬请期待', 2000, 'ios');};// 绑定点击事件document.getElementById('android').onclick = () => {Toast('即将上线，敬请期待', 2000, 'android');};
};

JavaScript：原生js写的一个多按钮Popover 弹出框相关推荐

HTML+CSS实现带按钮的弹出框
带按钮的弹出框 HTML部分 CSS样式 JS部分效果图补充知识:关于rgba属性 HTML部分 <button id="showPopup" onclick=" ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
asp.net中关于点击页面一个控件，弹出框的制作
先简述一下一下背景,最近有个项目中有一个页面是关于工作人员大致情况的展示页面,展示的信息放在一个gridview控件里面,控件里有一列为工作人员姓名,然后希望能达到点击姓名弹出一个框显示出此工作人员的 ...
用canvas和原生JS写的一个flappy bird游戏
为什么80%的码农都做不了架构师?>>> <!DOCTYPE html> <html> <head> <title>&l ...
AlertDialog,安卓自带取消确认按钮的弹出框
private void showMyDialog(){AlertDialog.Builder builder = new AlertDialog.Builder(context);builder.s ...
html 原生弹出框,html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果...
模态框: html部分: 弹出框 hhhhh 取消确认 css部分: #box{ width: 80px; height: 40px; background: #fd7430; border:non ...
js 取得input绑定的datalist中的值_原生JS写一个ToDo Demo
周六加班没什么事,于是乎...上班摸鱼,用原生JS写了一个ToDo Demo,废话少叙,直接看效果: 如图,实现了以下需求(以下的具体实现我会一一道来): 0.页面的基本布局: 1.rem布局.在不同 ...
原生JS写仿淘宝搜索框（代码+效果），可实现3级搜索哦！
闲来无事,用原生JS写了一个淘宝搜索框,用的淘宝的接口,可直接进行商品搜索. 写在前面: 1.记得引用jquery啊! 2.有人私信我说css样式不能用,那是因为复制代码的时候,有空格,只需要自己把c ...
[Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面
引言查看项目代码的时候,发现项目中用到JqueryUi的弹出框,可拖拽,可设置模式对话框,就想着使用它弄一个登录页面. 弹出框在Jquery Ui官网可定制下载弹出框,下载和弹出框下载相关的js文 ...

JavaScript：原生js写的一个多按钮Popover 弹出框

JavaScript：原生js写的一个多按钮Popover 弹出框相关推荐

最新文章

热门文章