求“微信网页版”右下角消息弹出提示的实现方法？

求“微信网页版”右下角消息弹出提示的实现方法？
应该是用JS实现的吧？？
注意是“微信网页版”！！！不是客户端啊

解决方案 »

  1.   

    自己写一个div定位在右下角,里面放几个span,p...
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        #dialog{
            width:250px;
            height:120px;
            position:absolute;
            right:0px;
            bottom:3px;
            background-color:green;
            color:white;
            text-align: center;
        }
        .hide{
            display: none;
        }
    </style>
    <body>
    <button type="button">click</button>
    <div id="dialog" class="hide" >
        <p class="title"></p>
        <p class="msg"></p>
        <p class="uname"></p>
    </div>
    <script src="../js/jquery.js"></script>
    <script>
        function show(t,m,u){
            $(".title").html(t);
            $(".msg").html(m);
            $(".uname").html(u);        setTimeout(function(){
                $("#dialog").addClass("hide");
            },1500);//1.5秒后隐藏
        }
        $("button").on("click",function(){
            $("#dialog").removeClass("hide");
            show("张三","信息内容","www.qq.com");
        })
    </script>
    </body>
    </html>
    引入jquery
      

  2.   

    在百度知道找到答案了，csdn这么大个论坛竟然没人知道，羞死人了下面贴出代码：<a onclick="showNotification();">show Notification</a>

    <script>
    function showNotification () {
    window.Notification.permission = "granted";
    alert(window.Notification.permission);
    if (window.Notification){ 
    if (window.Notification.permission == "granted") {
    var notification = new Notification('标题', {
    body: "内容",
    icon: "图标路径，若不指定默认为favicon"
    });
    setTimeout(function(){notification.close();},5000);
    } else {
    window.Notification.requestPermission();
    }    
    }else alert('你的浏览器不支持此消息提示功能，请使用chrome内核的浏览器！');
    };
    </script>
      

  3.   

    这是浏览器的桌面通知api
    http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/