操作成功的提示信息动态添加

在当前元素点击时，添加操作成功提示tips. 往往在计算tips位置时比较麻烦，工作实践中完成过此类工作，记录分享一下。

ele.addEventListener('click', function(e){var targetDom = e.srcElement||e.target;addTooltip(e, targetDom, 'CopySuccessfully');}, false);
function addTooltip(e, targetDom, tipsText) {if (!e || !targetDom) {return;}const tooltipDom = document.querySelector(`[data-insert-tooltip-text="${tipsText}]"`);if (tooltipDom) {tooltipDom.remove();}const { clientX, clientY } = e;const { top, left, width, height } = targetDom.getBoundingClientRect();const clientWidth = document.body.clientWidth;const tooltipMargin = 4;const tooltipHeight = 32;const tooltipWidth = 170;const position = {top: parseInt(top - tooltipMargin - tooltipHeight),bottom: parseInt(top + height + tooltipMargin),left:clientX > parseInt(tooltipWidth / 2)? parseInt(clientX - tooltipWidth / 2): clientX,right: parseInt(clientX - tooltipWidth)};const wrap = document.createElement('div');console.log(position);wrap.innerHTML = `<div data-insert-tooltip="true" data-insert-tooltip-text="${tipsText}" style="position: fixed;border-radius: 3px;background-color: #212121;padding: 6px 16px;display: flex;align-items: center;font-size: 13px;color: #fff;font-weight: 400;white-space: nowrap;top: ${position.top > 0 ? position.top : position.bottom}px;left: ${position.left > 0 && position.left < clientWidth? position.left: position.right}px;z-index: 2147483647;"><svgstyle="width: 16px; height: 16px; fill: #fff; margin-right: 8px;"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"><path d="M512 0C229.696 0 0 229.696 0 512s229.696 512 512 512 512-229.696 512-512-229.696-512-512-512z m0 960c-246.976 0-448-201.024-448-448s201.024-448 448-448 448 201.024 448 448-201.024 448-448 448z"  /><path d="M828.544 349.696L433.92 744.32 195.456 503.872a40.64 40.64 0 1 1 57.472-57.472l180.992 182.4 337.152-337.152a40.64 40.64 0 1 1 57.472 57.472v0.576z"  /></svg><span>${tipsText}</span></div>`;const tooltip = wrap.firstChild;document.body.appendChild(tooltip);setTimeout(function() {tooltip && tooltip.remove();}, 1500);}

操作成功的提示信息动态添加相关推荐

JS 对select动态添加options操作[IEFireFox兼容]
JS 对select动态添加options操作[IE&FireFox兼容] 做一个项目,遇到了要动态调整 select 选项的情况,就baidu了一下,发现了一篇与本文同名的帖子. 但是呢,那 ...
html表单中动态添加下拉框,antd Select下拉菜单动态添加option里的内容操作
antd Select下拉菜单动态添加option里的内容,通过form表单绑定select选中的值提供一个公共的方法,每次只需去调用这个方法就行了 //这里是示例数据格式 let giftScop ...
yii 添加，操作成功，但数据并没有插入到数据库中
createAction操作成功,但是数据库中除了自增的数据其它数据都为空. 原因是medel中没有定义rules public function rules(){ return array( arr ...
java操作word循环动态添加表格Table使用poi-tl的LoopRowTableRenderPolicy
通过这个简单的例子,再去和自己的业务结合官网http://deepoove.com/poi-tl/ 官网有其它完整的例子:http://deepoove.com/poi-tl/#hack-loop- ...
【Runtime】动态添加方法demo
今天写一个小demo来演示下runtime的消息转发和动态添加方法. 一般项目中都会有保存当前登录用户资料的需求,我们可以直接将登录成功后的用户信息分别保存到NSUserDefaults中: [def ...
linux更新模块,Linux下Nginx的安装、升级及动态添加模块
系统基于ubuntu server 14.04.4 amd64 安装第一步下载并解压Nginx压缩包从Nginx官网下载Nginx,或者在Linux上执行wget http://nginx.or ...
android ,动态布局 butterknife,与Butterknife绑定在android中动态添加视图
如何绑定布局中存在的视图,该视图使用ButterKnife动态添加到父视图中. 我有一个LinearLayout说容器.我有一个自定义布局,其中包含两个按钮,将此布局称为子视图在活动中,我将chil ...
使用js对select动态添加和删除OPTION示例代码
动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助 <sel ...
android listview动态添加viewpager,向 ViewPager 中添加包含 ListView 的 Fragment
对与fragment就不说什么了,直接看API手册吧,亲. 向 ViewPager 中添加包含 ListView 的 Fragment 的过程比较麻烦.他所表现的效果就是新闻客户端的滑动翻页效果. ...

操作成功的提示信息动态添加

操作成功的提示信息动态添加相关推荐

最新文章

热门文章