精华内容
下载资源
问答
  • 网页端仿原生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后前端妹子一枚,爱阅读,爱交友,将工作中遇到的问题记录在这里,希望给每一个看到的你能带来一点帮助。
    欢迎留言交流。

    展开全文
  • toast.js提示弹窗

    2020-05-16 10:16:55
    toast.js提示弹窗
  • toast.show('要提示的内容',2000) //2000是时间,2s后弹窗消失 具体代码如下: toast.js部分,需要的页面引用下这个js // 常用方法1 闪屏 toast 提示,2秒后关闭 var toast = { t: null, show: function (msg, ...

    使用方法:

    toast.show('要提示的内容',2000)  //2000是时间,2s后弹窗消失
    

    效果图
    具体代码如下:

    toast.js部分,需要的页面引用下这个js

    // 常用方法1 闪屏 toast 提示,2秒后关闭
    var toast = {
        t: null,
        show: function (msg, time) {
            var $toast = $('#toast');
            var $mask = $('.mask')
            if (this.t) {
                clearTimeout(this.t);
            }
    
            if (msg) {
                var $toastContent = $('#toast .toast__content');
                $toastContent.html(msg);
            }
            $toast.fadeIn(100);
            $mask.show()
            if (time) {
                toast.t = setTimeout(function () {
                    $toast.fadeOut(100);
                    $mask.hide()
                }, time);
            } else {
                toast.t = setTimeout(function () {
                    $toast.fadeOut(100);
                    $mask.hide()
                }, 2000);
            }
    
        }
      }
    

    html部分

    <div style="display: none;" id="toast">
        <div class="mask"></div>
        <div class="toast__content">
        	内容内容
        </div>
    </div>
    

    css样式

    /*蒙层![在这里插入图片描述](https://img-blog.csdnimg.cn/201912092006502.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODE1MjQ5NA==,size_16,color_FFFFFF,t_70)*/
    .mask {
        position: fixed;
        z-index: 1000;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
    }
    
    .toast_content{
    	position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1200;
        display: flex;
        align-items: center;
        background: rgba(40, 40, 40, 0.75);
        color: #fff;
        border-radius: 80px;
        padding: 30px 50px;
        font-size: 32px;
        line-height: 20px;
        justify-content: center;
    }
    
    展开全文
  • Toast('点击提示') } 报错信息 [Vue warn]: Error in v-on handler: “ReferenceError: Toast is not defined” 解决方法: handleClick(){ this.$toast('点击提示') } 补充知识:vue+vant移动端遇到的那些问题...
  • 自定义Toast提示

    2019-07-29 17:42:37
    Toast toast = new Toast(this); toast.setGravity(Gravity.center,0,180); ImageView image = new ImageView(this); image.setImageResource(R.drawable.ok); LinearLayout layout = new LinearLayout (this); layo...

    Toast toast = new Toast(this);
    toast.setGravity(Gravity.center,0,180);
    ImageView image = new ImageView(this);
    image.setImageResource(R.drawable.ok);
    LinearLayout layout = new LinearLayout (this);
    layout.addView(image);
    TextView txt = new TextView (this);
    txt.setText(“恭喜您,注册成功”);
    txt.setSize(16);
    layout.addView(txt);
    toast.setView(layout);
    toast.setDuration(Toast.LENGTH_LONG);
    toast.show();

    LinearLayout 默认属性是水平的。

    展开全文
  • 提示只存在几秒,F12里的元素div层也只存在几秒,往往无法定位 1.打开浏览器,访问页面,按下F12 2.按下F1(或者点击右上角的三个点出来设置),打开设置页面 3.操作页面,让提示信息出现,然后马上勾选...

    遇见这种情况很多人不知道怎么定位

    提示只存在几秒,F12里的元素div层也只存在几秒,往往无法定位

        

     

    1.打开浏览器,访问页面,按下F12

    2.按下F1(或者点击右上角的三个点出来设置),打开设置页面

    3.操作页面,让提示信息出现,然后马上勾选Debugger栏下的Disabled JavaScript(记住一定要在提示信息出现的时候勾选)

    这个时候,提示信息就不会消失了,就可以进行定位处理了

    参考文章https://blog.csdn.net/weijiaxin2010/article/details/89097607(也感谢这篇文章为我解决了这个问题)

    展开全文
  • web页面添加toast功能

    千次阅读 2019-04-03 10:38:00
    在H5页面添加toast,且可以实现toast宽度自适应的功能。首先是在网上找了某一位大牛的js文件(未找到原始出处,此处不再做引用标注),并做了适应性的修改; // msg:文案信息;duration:毫秒数;minWidth:宽度值,...
  • Toast in Web,页版Toast实现。

    千次阅读 2017-07-19 11:30:51
    如何在网页弹出一个Toast 前言: 在如今H5与原生交互越来越多的情况下,大部分情况下,吐司的功能都可以由客户端原生来实现,但是在有些特殊的情况下会需要页面来弹出一个吐司,这篇博客记录如何通过html css js实现...
  • Toast(提示信息),Dialog(弹窗).

    千次阅读 2015-08-27 20:26:31
    主要掌握Toast.makeText(), toast.setGravity()(位置定位),toast.setDuration()(时间设置),toast.setView()(在自定义的Toast中用)的用法。这里主要有三种设计模式:1)简单模式。2)富文本模式。3)插入图片的...
  • 自己手动写一个js 的toast提示

    千次阅读 2018-10-10 15:48:54
    闲来无聊,就尝试着自己写一个toast,因为之前写网页是一直会用到的,所以就自己造了个轮子,也当作学习记录(有不好的地方请多多指教),下面贴代码 &lt;!DOCTYPE html&gt; &lt;html lang="en&...
  • spop.js是一款纯js toast消息提示通知插件。通过spop.js插件,你可以快速的在网页上制作出漂亮的toast消息提示效果。
  • H5弹出toast

    千次阅读 2018-02-06 18:24:20
    &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &...H5弹出toast&lt;/title&
  • Toast 自定义布局 完成图片上传提示

    千次阅读 2016-07-10 14:43:52
    Toast.makeText(APICallingActivity.this,"扫描 :" + bundle.getString("result"),Toast.LENGTH_LONG).show(); } break; } }*/ /**上传时,选择获取图片的方式 * */ public void selectPhoto() { // 弹出...
  • Toast 轻量级提示

    2016-09-02 13:59:03
    class ToastUtils { private static String oldMsg;...private static Toast toast = null; /** 第一次时间 */ private static long oneTime = 0; /** 第二次时间 */ private static long twoTime = 0
  • React弹框 Toast 弹出页面等简单实现方案(百达通)
  • web js的alert弹出框,有时候并不是我们想要的,但是有时候又想给用户友好的提示,看了android的toast提示框也可在web前端实现,下面是参考一个人的源码稍作修改做的 // JavaScript Document // prompt message ...
  • 仿安卓的手机网页toast

    千次阅读 2015-04-14 09:29:27
     * 模仿android里面的Toast效果,主要是用于在不打断程序正常执行的情况下显示提示数据  * @param config  * @return  */ var Toast = function(config){  this.context = config.context==null?$('...
  • 七、第七批勘误记录: 1、第55页“2.5.2 小知识:日志Log/提示Toast”开始 “2.5.2 小知识:日志Log/提示Toast”和“2.5.3 代码示例”这两个小节共有七处“被除数”要改为“除数”,因为除法运算要检查除数是否为零...
  • TypeScript(JavaScript)封装一个Toast组件

    多人点赞 热门讨论 2021-06-02 23:19:00
    大家好,又是我,我是萌杰尔 最近闲来无事,就用JavaScript封装了一个组件库(其实目前只有一个...首先新建一个网页项目,创建一个index.html 引入gree.js 为了页面更好看一些,我在页面中添加了背景图片(稍后可以在源码
  • 2:触发事件进行监听,然后绑定Toast对象进行消息提示 1,创建Android项目的时候,自带的一个Activity,我们看看代码 1 package com.example.androidday2testbyteacherbydfs; 2 3 import android.app....
  • 1.显示提示框 wx.showToast(Object object): 显示消息提示框 (1)wxml文件 <button bindtap='show'>显示提示框</button> (2)js文件 show:function(){ console.log("aaa") wx.showToast({ t...
  • 样式文件 toast.css .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 12px 16px; border-radius: 4px; background: rgba(0, 0, 0, .7); color: #fff; ...
  • online 该事件在浏览器开始在线工作时触发 offline 该事件在浏览器开始离线工作时触发 // 网络状态监听 - 离线 window.addEventListener('offline', function(e) { //提示 layer.open({ ...
  • selenium怎样定位web提示

    千次阅读 2018-08-14 14:16:22
    一、用谷歌没有抓到web的吐司信息 二、使用火狐浏览器(保密原因,涂抹较为严重)能够定位到该元素 三、代码如下: WebElement elementText = driver.findElement(By.cssSelector("div.message.ng-...
  • https://www.jb51.net/article/146604.htm
  • 网页上有很多JS特效,比如输入一段话后,会有一个小层弹出来做为提示操作,隔几秒钟后就消失,此操作不仅有很好的用户体验并且也增强了网页的交互能力。不是在写Android的内容?怎么又拉上网页去了。。呵呵!!其实...
  • Android编程权威指南第3版 1.11 挑战练习:定制 toast 消息 这个练习需要你定制toast消息,改在屏幕顶部而...该方法所在网页为developer.android.com/reference/android/widget/Toast.html#setGravity(int, int, int)。
  • 本效果是由EXTJS插件为核心实现的网页气泡提示特效,ExtJs的风格很漂亮哦,喜欢大家喜欢.当鼠标点击蓝色框中的内容时,会弹出一个带关闭按钮的提示框,这个提示框是借用EXTJS中的插件实现的,可二次开发完善。实现...
  • 在开发中,我们经常会需要做一些耗时的操作:比如下载图片、打开网页、下载视频等。如果将这些耗时的操作放在主线程(UI线程),长时间的阻塞导致应用ANR。必然应该将这些操作放在子线程中处理,这些操作处理过程中...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,743
精华内容 2,297
关键字:

网页toast提示