关键词:
js代码
1 //toast弹出框 2 var layerTime; 3 function layer(txt, time) 4 clearTimeout(layerTime); 5 var times = time || 2000; 6 $(".layer_wrap").remove(); 7 $("body").append(‘<div id="layer_wrap" class="layer_wrap"></div>‘); 8 $(".layer_wrap").append(‘<p id="layer" class="layer sct">‘ + txt + "</p>"); 9 var o = $(".layer").height(); 10 var p = $(".layer").width(); 11 $(".layer_wrap").css( 12 "margin-top": -o / 2 13 ); 14 layerTime = setTimeout(function() 15 $(".sct").removeClass("layer").addClass("unlayer"); 16 $(".sct").on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",function() 17 $(".layer_wrap").remove(); 18 ); 19 , 20 times) 21
css 代码
1 @keyframes ss 2 0% 3 opacity: 0; 4 -webkit-transform: scale(.5); 5 -ms-transform: scale(.5); 6 transform: scale(.5) 7 8 9 100% 10 opacity: 1; 11 -webkit-transform: scale(1); 12 -ms-transform: scale(1); 13 transform: scale(1) 14 15 16 17 @keyframes sss 18 0% 19 opacity: 1; 20 -webkit-transform: scale(1); 21 -ms-transform: scale(1); 22 transform: scale(1) 23 24 25 100% 26 opacity: 0; 27 -webkit-transform: scale(.5); 28 -ms-transform: scale(.5); 29 transform: scale(.5) 30 31 32 33 .layer_wrap 34 position: fixed; 35 width: 9rem; 36 top: 50%; 37 left: 50%; 38 margin-left: -4.5rem; 39 margin-top: -1rem; 40 text-align: center; 41 z-index: 9999999; 42 43 44 .layer 45 min-width: 3rem; 46 background-color: rgba(0,0,0,.6); 47 border-radius: 8px; 48 display: inline-block; 49 color: #fff; 50 font-size: .32rem; 51 text-align: center; 52 line-height: .4rem; 53 padding: .3rem .6rem; 54 word-break: break-all; 55 animation-name: ss; 56 animation-duration: .3s; 57 animation-timing-function: ease; 58 animation-fill-mode: both; 59 -ms-animation-name: ss; 60 -ms-animation-duration: .3s; 61 -ms-animation-timing-function: ease; 62 -ms-animation-fill-mode: both; 63 -webkit-animation-name: ss; 64 -webkit-animation-duration: .3s; 65 -webkit-animation-timing-function: ease; 66 -webkit-animation-fill-mode: both 67 68 69 .unlayer 70 background-color: rgba(0,0,0,.6); 71 border-radius: 8px; 72 display: inline-block; 73 color: #fff; 74 font-size: .32rem; 75 text-align: center; 76 line-height: .4rem; 77 padding: .3rem .6rem; 78 word-break: break-all; 79 animation-name: sss; 80 animation-duration: .2s; 81 animation-timing-function: ease; 82 animation-fill-mode: both; 83 -ms-animation-name: sss; 84 -ms-animation-duration: .2s; 85 -ms-animation-timing-function: ease; 86 -ms-animation-fill-mode: both; 87 -webkit-animation-name: sss; 88 -webkit-animation-duration: .2s; 89 -webkit-animation-timing-function: ease; 90 -webkit-animation-fill-mode: both 91
前端开发之弹出框系列教程一:alert提示框(代码片段)
1、居中弹出$k.alert(content:‘居中弹出‘); 查看效果 2、左上角弹出$k.alert(content:‘左上角弹出‘,style:left:0,top:0); 查看效果 3、右下角弹出$k.alert(content:‘右上角弹出‘,style:left:‘r‘,top:‘b‘); 查看效果&nb 查看详情
前端开发之弹出框系列教程三:msg消息框(代码片段)
1、居中弹出$k.msg(content:‘居中弹出‘); 查看效果 2、左上角弹出$k.msg(content:‘左上角弹出‘,style:left:0,top:0); 查看效果 3、右下角弹出$k.msg(content:‘右上角弹出‘,style:left:‘r‘,top:‘b‘); 查看效果 4、左 查看详情
react封装一个组件弹出框(代码片段)
目录前言代码简要引用效果前言我是歌谣放弃很容易但是坚持一定很酷为了保证react代码的一个简洁性最近开始封装组件,直接上代码因为都很简单的模式这边直接进行讲解代码//取消机构和取消讲师的方法封装//paramsvisible控制弹... 查看详情
winform|c#弹出简易的消息提示框(仿androidtoast消息提示)(代码片段)
...sToast消息提示前言方法原型及参数释义消息驻留延时消息弹出模式队列模式抢占模式复用模式UI库安装与使用获取示例源码前言在使用手机的时候经常会见到屏幕的中下方会弹出消息提示框,它就是Toast,以下是百度百科... 查看详情
前端开发之弹出框系列教程二:confirm确认框(代码片段)
1、居中弹出$k.confirm(content:‘居中弹出‘,onClosed:function(args)if(args.closeTrigger==‘btn-0‘)$k.alert(content:‘您点了"确定"按钮‘);else$k.alert(content:‘您点了"取消"按钮‘);); 查看效果 2、左上角弹出$k.confi 查看详情
Bootstrap 5 工具提示、弹出框和 toast 在 Ruby on Rails 6 中不起作用
】Bootstrap5工具提示、弹出框和toast在RubyonRails6中不起作用【英文标题】:Bootstrap5tooltip,popoverandtoastsnotworkinginRubyonRails6【发布时间】:2021-02-2222:15:42【问题描述】:我正在使用Railsbytes脚本安装bootstrap5alpha;https://railsbytes.com/public/t... 查看详情
android弹出toast工具类总结(代码片段)
Android弹出Toast工具类总结,包括系统自带的,也包括自定义的。 publicclassToastUtilpublicToastUtil()publicstaticToastshowShortToast(Contextcontext,Stringtext)Toasttoast=Toast.makeText(context,text,0);toast.show();returntoast;publicstaticToastshowShortToastCenter(Cont... 查看详情
自制弹出框所踩的坑(代码片段)
项目中要做一个弹出框,弹出框里面有一个搜索框,弹出框背后有一个遮罩层,但是layer插件又不能适用中国业务场景,要求是:点击搜索框本身弹出框不关闭,点击遮罩层阴影部分关闭弹出框开始想的很简单,只要点击搜索框... 查看详情
二十一天——打卡第十五天(javascript实现登录弹出框)(代码片段)
今天写个点击出现弹出框的效果。HTML:<h2>点击,弹出对话框</h2> <divid="login"> <h3>登录会员</h3> <divclass="yonghuming"><span>用户名:</sp 查看详情
一个简单的弹出框组件(代码片段)
个人写这个弹出框的原因就一个,就是能给我带来可复用,追求新,要简单,可扩展。要达到炫酷有点难度,分析后还是决定以功能为主,因为是用jq和animation实现的弹出框组件,所以看起来难度不大,简称co-dialog。 灵... 查看详情
html复选框-选择框(弹出框)(代码片段)
sweetalert弹出框(代码片段)
以前也用过,那个时候没有写过,突然看见了,就写上了. 网址:http://mishengqiang.com/sweetalert2/swal(title:‘确定删除吗?‘,text:‘你将无法恢复它!‘,type:‘warning‘,showCancelButton:true,confirmButtonColor:‘#3085d6‘,cancelButtonColor:‘#d33... 查看详情
jquery实现点击弹出框外界面关闭弹框(代码片段)
...hone").css("filter","brightness(100%)");67);8$("#touch").click(function()//弹出框910$("#miss").fadeIn("slow");11$("#phone").css("filter","brightness(50%)");1213)14)点击id为touch的button时,closest("#touch,#miss),匹配到#touch本身,length为1,弹出弹框。弹出弹框后,点击... 查看详情
ios仿微信弹出框lpactionsheet(代码片段)
iOS仿微信弹出框LPActionSheetLPActionSheet是一款轻量级的仿微信弹出框安装从CocoaPods安装CocoaPods可以优雅地管理第三方库(具体使用方式我在另一篇文章有详细介绍,这里不再赘述)第一步:在Podfile文件中写入如下代码pod'LPActionSheet'... 查看详情
uni-app_uview1.0实现九宫格功能(点击item1背景色改变2弹出toast框)(代码片段)
1、效果:2、源码:<template> <viewclass="u-demo"> <u-toastref="uToast"></u-toast> <u-grid 查看详情
自定义弹出框效果
对网站而言,弹出框是比较常见的。或是给出用户操作提示,或是通过弹出框打开一个小窗口以提示信息,或是给出错误警示等等。但是由于浏览器自带的弹出窗口alert,confirm,prompt样式比较单调,且不同浏览器有不同的默认样式... 查看详情
可消失的弹出框
通过使用focus触发器可以在用户点击弹出框是让其消失。实现“点击并让弹出框消失”的效果需要一些额外的代码为了更好的跨浏览器和跨平台效果,你必须使用<a>标签,不能使用<button>标签,并且,还必须包含tabindex属... 查看详情
javaswingjpanel怎么添加一个jdialog弹出框
通过:弹出框,顾名思义就是刚开始看不见,触发某个事件后弹出的一个框所以我们要让JPanel响应指定的事件然后弹出.比如常见的事件,鼠标点击JPanel后弹出弹出框.一般有两种方法实现方法一:JOptionPane创建1个简单的弹出框.(代码量少... 查看详情