精华内容
下载资源
问答
  • 网页端仿原生Toast提示
  • 网页自定义toast提示

    千次阅读 2019-01-10 12:33:00
    toast提示是应用里很常见的提示方式,它的特点是:动画出现、屏幕居中、停留一段时间自动消失。 网页原生的alert弹框不是很受大家喜欢,于是自己动手写一个,封装成方法,放在公共库里,以后用作提示信息很方便。 ...

    toast弱提示是应用里很常见的提示方式,它的特点是:动画出现、屏幕居中、停留一段时间自动消失。
    网页原生的alert弹框不是很受大家喜欢,于是自己动手写一个,封装成方法,放在公共库里,以后用作提示信息很方便。

     
     
    13079544-99924c9f7707d4d1.gif
     

    一:用JS动态创建一个div元素,并为元素加上逐渐显示的动画,将这个元素添加到body里,并且通过定时器让这个提示信息逐渐消失并移除

     var toast = function(params) {
            /*设置信息框停留的默认时间*/
            var time = params.time;
            if(time == undefined || time == ''){
                time = 1500;
            }
            var el = document.createElement("div");
            el.setAttribute("class", "web-toast");
            el.innerHTML = params.message;
            document.body.appendChild(el);
            el.classList.add("fadeIn");
            setTimeout(function () {
                el.classList.remove("fadeIn");
                el.classList.add("fadeOut");
                /*监听动画结束,移除提示信息元素*/
                el.addEventListener("animationend", function () {
                    document.body.removeChild(el);
                });
                el.addEventListener("webkitAnimationEnd", function () {
                    document.body.removeChild(el);
                });
    
            }, time);
        }
    

    二:toast的浮现消失使用css3动画定义,并且使用定位使其在屏幕居中显示

    @keyframes fadeIn {
        0%    {opacity: 0}
        100%  {opacity: 1}
    }
    @-webkit-keyframes fadeIn {
        0%    {opacity: 0}
        100%  {opacity: 1}
    }
    @-moz-keyframes fadeIn {
        0%    {opacity: 0}
        100%  {opacity: 1}
    }
    @-o-keyframes fadeIn {
        0%    {opacity: 0}
        100%  {opacity: 1}
    }
    @-ms-keyframes fadeIn {
        0%    {opacity: 0}
        100%  {opacity: 1}
    }
    @keyframes fadeOut {
        0%    {opacity: 1}
        100%  {opacity: 0}
    }
    @-webkit-keyframes fadeOut {
        0%    {opacity: 1}
        100%  {opacity: 0}
    }
    @-moz-keyframes fadeOut {
        0%    {opacity: 1}
        100%  {opacity: 0}
    }
    @-o-keyframes fadeOut {
        0%    {opacity: 1}
        100%  {opacity: 0}
    }
    @-ms-keyframes fadeOut {
        0%    {opacity: 1}
        100%  {opacity: 0}
    }
    .web-toast{
        position: fixed;
        background: rgba(0, 0, 0, 0.7);
        color: #fff;
        font-size: 14px;
        line-height: 1;
        padding:10px;
        border-radius: 3px;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        z-index: 9999;
        white-space: nowrap;
    }
    .fadeOut{
        animation: fadeOut .5s;
    }
    .fadeIn{
        animation:fadeIn .5s;
    }
    
    

    三:调用封装好的toast提示函数

    webToastObj({
              message:"我是Toast提示框",
              time:2000
    })
    

    参数说明:
    message:提示信息,必传
    time:提示信息显示时间,默认1500,可不传
    使用起来是不是很简单方便呢

    原文作者技术博客:https://www.jianshu.com/u/ac4daaeecdfe
    95后前端妹子一枚,爱阅读,爱交友,将工作中遇到的问题记录在这里,希望给每一个看到的你能带来一点帮助。
    欢迎留言交流。

    展开全文
  • 网页原生的alert弹框不是很受大家喜欢,于是自己动手写一个,封装成方法,放在公共库里,以后用作提示信息很方便。一:用JS动态创建一个div元素,并为元素加上逐渐显示的动画,将这个元素添加到body里,并且通过...

    toast弱提示是应用里很常见的提示方式,它的特点是:动画出现、屏幕居中、停留一段时间自动消失。

    网页原生的alert弹框不是很受大家喜欢,于是自己动手写一个,封装成方法,放在公共库里,以后用作提示信息很方便。

    一:用JS动态创建一个div元素,并为元素加上逐渐显示的动画,将这个元素添加到body里,并且通过定时器让这个提示信息逐渐消失并移除

    var toast = function(params) {

    /*设置信息框停留的默认时间*/

    var time = params.time;

    if(time == undefined || time == ''){

    time = 1500;

    }

    var el = document.createElement("div");

    el.setAttribute("class", "web-toast");

    el.innerHTML = params.message;

    document.body.appendChild(el);

    el.classList.add("fadeIn");

    setTimeout(function () {

    el.classList.remove("fadeIn");

    el.classList.add("fadeOut");

    /*监听动画结束,移除提示信息元素*/

    el.addEventListener("animationend", function () {

    document.body.removeChild(el);

    });

    el.addEventListener("webkitAnimationEnd", function () {

    document.body.removeChild(el);

    });

    }, time);

    }

    二:toast的浮现消失使用css3动画定义,并且使用定位使其在屏幕居中显示

    @keyframes fadeIn {

    0% {opacity: 0}

    100% {opacity: 1}

    }

    @-webkit-keyframes fadeIn {

    0% {opacity: 0}

    100% {opacity: 1}

    }

    @-moz-keyframes fadeIn {

    0% {opacity: 0}

    100% {opacity: 1}

    }

    @-o-keyframes fadeIn {

    0% {opacity: 0}

    100% {opacity: 1}

    }

    @-ms-keyframes fadeIn {

    0% {opacity: 0}

    100% {opacity: 1}

    }

    @keyframes fadeOut {

    0% {opacity: 1}

    100% {opacity: 0}

    }

    @-webkit-keyframes fadeOut {

    0% {opacity: 1}

    100% {opacity: 0}

    }

    @-moz-keyframes fadeOut {

    0% {opacity: 1}

    100% {opacity: 0}

    }

    @-o-keyframes fadeOut {

    0% {opacity: 1}

    100% {opacity: 0}

    }

    @-ms-keyframes fadeOut {

    0% {opacity: 1}

    100% {opacity: 0}

    }

    .web-toast{

    position: fixed;

    background: rgba(0, 0, 0, 0.7);

    color: #fff;

    font-size: 14px;

    line-height: 1;

    padding:10px;

    border-radius: 3px;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    -webkit-transform: translate(-50%,-50%);

    -moz-transform: translate(-50%,-50%);

    -o-transform: translate(-50%,-50%);

    -ms-transform: translate(-50%,-50%);

    z-index: 9999;

    white-space: nowrap;

    }

    .fadeOut{

    animation: fadeOut .5s;

    }

    .fadeIn{

    animation:fadeIn .5s;

    }

    三:调用封装好的toast提示函数

    webToastObj({

    message:"我是Toast提示框",

    time:2000

    })

    参数说明:

    message:提示信息,必传

    time:提示信息显示时间,默认1500,可不传

    使用起来是不是很简单方便呢

    原文作者技术博客:https://www.jianshu.com/u/ac4daaeecdfe

    95后前端妹子一枚,爱阅读,爱交友,将工作中遇到的问题记录在这里,希望给每一个看到的你能带来一点帮助。

    欢迎留言交流。

    展开全文
  •  * 模仿android里面的Toast效果,主要是用于在不打断程序正常执行的情况下显示提示数据  * @param config  * @return  */ var Toast = function(config){  this.context = config.context==null?$('...

    1.先写好toast的js代码:

    /**
     * 模仿android里面的Toast效果,主要是用于在不打断程序正常执行的情况下显示提示数据
     * @param config
     * @return
     */  
    var Toast = function(config){  
        this.context = config.context==null?$('body'):config.context;//上下文  
        this.message = config.message;//显示内容  
        this.time = config.time==null?6000:config.time;//持续时间  
        this.left = config.left;//距容器左边的距离  
        this.top = config.top;//距容器上方的距离  
        this.init();  
    }  
    var msgEntity;  
    Toast.prototype = {  
        //初始化显示的位置内容等  
        init : function(){  
            $("#toastMessage").remove();  
            //设置消息体  
            var msgDIV = new Array();  
            msgDIV.push('<div id="toastMessage">');  
            msgDIV.push('<span>'+this.message+'</span>');  
            msgDIV.push('</div>');  
            msgEntity = $(msgDIV.join('')).appendTo(this.context);  
            //设置消息样式  
            var toastMessageWidth = $('#toastMessage').innerWidth();
            var toastMessageHeight = $('#toastMessage').innerHeight();
            var windowWidth = $(window).width();
            var windowHeight = $(window).height();
            var newWidth = (windowWidth - toastMessageWidth - 80) / 2 + "px";
            var newHeight = (windowHeight - toastMessageHeight - 80) / 2 + "px";
            msgEntity.css({'left':newWidth,'z-index':'999999','top':newHeight,'background-color':'black','color':'white',
                'padding':'30px','font-size':'18px','border':'3px solid #f8c26d'});  
        },  
        //显示动画  
        show :function(){  
            msgEntity.fadeIn(this.time/2);  
            msgEntity.fadeOut(this.time/2);  
        }        
    }
    function toastFunction(messageString){
        new Toast({context:$('body'),message:messageString}).show();
        }

    2.先在你的html主页中添加jquery库和一下样式:

    <style type="text/css">
         #toastMessage{
            position: absolute;
            border-radius: 15px;
            cursor:pointer;
         }
    </style>

    3.如何调用:

    toastFunction("成功调用!");


    展开全文
  • spop.js是一款纯js toast消息提示通知插件。通过spop.js插件,你可以快速的在网页上制作出漂亮的toast消息提示效果。
  • 自己手动写一个js 的toast提示

    千次阅读 2018-10-10 15:48:54
    闲来无聊,就尝试着自己写一个toast,因为之前写网页是一直会用到的,所以就自己造了个轮子,也当作学习记录(有不好的地方请多多指教),下面贴代码 &lt;!DOCTYPE html&gt; &lt;html lang="en&...

    闲来无聊,就尝试着自己写一个toast,因为之前写网页是一直会用到的,所以就自己造了个轮子,也当作学习记录(有不好的地方请多多指教),下面贴代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta name='viewport' content='width=device-width,minimum-scale=1.0 maximum-scale=1.0 user-scalable=no' /> 
    	<title>demo</title>
    	<style>
    		*{
    			padding: 0;
    			margin: 0;
    		}
    		.yg-toast{
    			position: fixed;
    			background: rgba(0,0,0,.7);
    			border-radius: 4px;
    			top: 90%;
    			left: 50%;
    			transform: translate(-50%,-50%);
    			max-width: 60%;
    			text-align: center;
    			transition: all .1s;
    		}
    		.yg-toast-text{
    			color: #fff;
    			padding: 4px 10px;
    		    padding-bottom: 6px;
    		}
    	</style>
    </head>
    <body>
    </body>
    <script type="text/javascript">
    	//立即执行函数
    	(function(window , undefined ){ 
    		var Ygtoast = function(){ //构造函数大驼峰命名法
    		};
    		Ygtoast.prototype={  //prototype 属性使您有能力向对象添加属性和方法。
    			create: function(str,duration) {
    				let self = this;
    				var toastHtml = '';
    				var toastText = '<div class="yg-toast-text">'+str+'</div>';
    				toastHtml = '<div class="yg-toast">'+toastText+'</div>';
    				if(document.querySelector(".yg-toast"))return;    //当还没hide时禁止重复点击
    				document.body.insertAdjacentHTML('beforeend', toastHtml);
    				duration == null ? duration=2000 : '';  //如果toast没有加上时间,默认2000毫秒;
    	            self.show();
    	            setTimeout(function(){
                        self.hide();
                    }, duration);
    			},
    			show:function(){
    				let self = this;
    	            document.querySelector(".yg-toast").style.display = "block";
    	            document.querySelector(".yg-toast").style.marginTop =  "-"+Math.round(document.querySelector(".yg-toast").offsetHeight/2)+"px";
    	            if(document.querySelector(".yg-toast"))return;
    			},
    			hide:function(){
    				var self = this;
    	            if(document.querySelector(".yg-toast")){
    	                document.querySelector(".yg-toast").parentNode.removeChild(document.querySelector(".yg-toast"));
    	            }
    			},
    			toast:function(str,duration){
    				var self = this;
    				return self.create(str,duration);
    			}
    		};
    		window.Ygtoast = Ygtoast;
    	}(window));
    
    	// 以上是造轮子
    
    	// 调用
    	var yg = new Ygtoast();
    	yg.toast("你说神马",1500);
    </script>
    </html>

    代码可以直接复制使用

    展开全文
  • 网页上有很多JS特效,比如输入一段话后,会有一个小层弹出来做为提示操作,隔几秒钟后就消失,此操作不仅有很好的用户体验并且也增强了网页的交互能力。不是在写Android的内容?怎么又拉上网页去了。。呵呵!!其实...
  •  Toast用于向用户显示一些帮助/提示。下面我做了5中效果,来说明Toast的强大,定义一个属于你自己的Toast。 1.默认效果 代码 Toast.makeText(getApplicationContext(), "默认Toast样式",Toast.LENGTH_SHORT)....
  • html5 网页加载中效果

    2014-11-22 13:14:33
    1.html5页面加载效果 2.类似安卓toast提示效果 3.IOS7.0 删除确认提示 上面有源代码,部分注释,下载后可以根据项目的需求更改里面的代码
  • 通过spop.js插件,你可以快速的在网页上制作出漂亮的toast消息提示效果SmallPop一个轻量级的弹出提示通知插件没有依赖关系,使用这个JavaScript插件轻松创建通知。使用方法在页面中引入spop.css和spop.js文件。初始...
  • 微信网页设计样式库WeUI

    千次阅读 2016-02-18 11:52:06
    该样式库目前包含 button (按钮)、cell (单元格)、toast (浮层提示)、dialog (对话框)等网页常用的各式元素,并已在 GitHub 上开源。开发者只需三步,就能在自己的网页上轻松实现按钮、浮层提示等功能: 1. 根据...
  • 该样式库目前包含 button (按钮)、cell (单元格)、toast (浮层提示)、dialog (对话框)等网页常用的各式元素,并已在 GitHub 上开源。 开发者只需三步,就能在自己的网页上轻松实现按钮、浮层提示等功能:1. 根据...
  • 在上篇文章中讲到自定义toast的实现:网页自定义toast提示框, 因此这个功能只需要做一些改变即可 一:先定义一个数组,存放要显示的信息 var arr = ["A","B","C","D",&...
  • 通过spop.js插件,你可以快速的在网页上制作出漂亮的toast消息提示效果。该js toast消息提示插件的特点还有: 内置4种主题样式:default, success, warning, error。 toast可以显示在屏幕的6个位置:top-left, top-...
  • Unity3D/安卓封装SDK常用方法 本文提供全流程,中文翻译。Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 —— 高分辨率用户请... Toast —— - - 安卓中提示 3 Regular Expression —— -...
  • 介绍rlayer 一款基于react.js构建的pc网页端全局弹窗组件。支持顺滑拖拽、缩放、全屏及最大化效果。拥有精美UI及极简API调用。内置30+参数配置、10+弹框类型、7+动画效果支持 Alert、Dialog、Message、Notification...
  • 关于安卓webview与js交互的问题,我这里的附件是网上下载的一抽奖网页,我想把它加载在webview里,然后在webview里运行后能够弹出来相应的提示(Toast弹出),比如抽到苹果,就弹出来个Toast提示苹果可能网页需要...
  • 微信WeUI入门

    2018-08-27 09:15:00
    该样式库目前包含 button (按钮)、cell (单元格)、toast (浮层提示)、dialog (对话框)等网页常用的各式元素,并已在 GitHub 上开源 开发者只需三步,就能在自己的网页上轻松实现按钮、浮层提示等功能:1. 根据文档.....
  • 最近实现一个网页端类似安卓的toast功能,要求可以同时显示多条提示,效果如下图: 百度搜了下,都不是我想要的结果,只好自己造轮子 还有一个需求,不能有大的div遮住网页内容,例如会导致toast的时候网页按钮无法...
  • 经常做移动端网页开发的朋友们,都应该会遇到,弹起遮罩层的交互需求,比如小点的toast提示框,modal对话框,也有满屏的提示框,或者可操作交互的弹框; 有些需求是要求在弹框上可操作,可滚动;在滚动时,就会遇到...
  • 场景:出现弹框展示短的提示信息,并且出现显示的倒计时 2s 后,弹框消失,整体框架用的是jquery-weui,本来想直接用toast,但是好像不能显示倒计时。 场景:分享的功能只有在微信打开网页有,那么,引导分享的按钮...
  • 常用视图控件 按钮(Button) ...吐司提示框(Toast) 拖动条(SeekBar) 文本显示框(Textview) 视频播放(VideoView) 网页视图控件(WebView) 对话框(Dialog) 选择器(Picker) 下拉列表框(...
  • 但是如果加上填报成功提示:FR.Msg.toast('填报成功'),同时使用的话,此提示并不会起作用; 所以,只能通过不刷新页面,直接清空控件值; 经过多次尝试,通过以下的js,测试可用: 在报表的web属性,填报属性中...
  • Toast.makeText(context, array[0], Toast.LENGTH_LONG).show(); } } //根据服务器端返回数据,自定义提示 else if(what==2){ status.setTips("自定义提示2"); }//根据...
  • Toast.info('请安装QQ') } }); </code></pre> 调用的时候设置了自定义的失败callback. 唤起成功时,也会出现提示框。 因为checkOpen时,网页还没有进到后台。document.hidden是undefined,...
  • Android开发应用实战详解源代码

    热门讨论 2012-12-31 10:20:37
    4.3 用toast实现提示 4.4 用checkbox实现一个简单的物品清单 4.5 实现同意条款效果 4.6 radiogroup选择 4.7 imageview相框 4.8 spinner选择处理 4.9 gallery相簿 4.10 用.iava.io.file实现文件搜索 4.11 置换...

空空如也

空空如也

1 2
收藏数 40
精华内容 16
关键字:

网页toast提示