AJAX调用完成后的消息提示框

Posted 笠航

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AJAX调用完成后的消息提示框相关的知识,希望对你有一定的参考价值。

之前因为写一些验证,会在调用成功或者失败后用到一些消息提示框,但找了很多了没找到比较合适的,对于一些框架中的组件感觉用着也不是很方便,于是自己用js写了一个简单的提示框,代码如下:

var appendhtml=function(el, html){
    var divTemp = document.createElement("div"), nodes = null
        // 文档片段,一次性append,提高性能
        , fragment = document.createDocumentFragment();
    divTemp.innerHTML = html;
    nodes = divTemp.childNodes;
    for (var i=0, length=nodes.length; i<length; i+=1) {
       fragment.appendChild(nodes[i].cloneNode(true));
    }
    el.appendChild(fragment);
    // 据说下面这样子世界会更清净
    nodes = null;
    fragment = null;
};

function showMessage(message,type,time) {
        let str = ‘‘
        switch (type) {
            case ‘success‘:
                str = ‘<div class="success-message animation" style="opacity:0;width: 300px;height: 40px;text-align: center;background-color:#daf5eb;;color: rgba(59,128,58,0.7);position: fixed;left: 50%;top: 30%;transform:translate(-50%,-50%);line-height: 40px;border-radius: 5px;z-index: 9999">
‘ +
                    ‘    <span class="mes-text">‘+message+‘</span></div>‘
                break;
            case ‘error‘:
                str = ‘<div class="error-message animation" style="opacity:0;width: 300px;height: 40px;text-align: center;background-color: #f5f0e5;color: rgba(238,99,99,0.8);position: fixed;left: 50%;top: 30%;transform:translate(-50%,-50%);line-height: 40px;border-radius: 5px;;z-index: 9999">
‘ +
                    ‘    <span class="mes-text">‘+message+‘</span></div>‘
        }

str=‘<style>.animation{animation:mymove 3s forwards ;-webkit-animation:mymove 3s forwards;}@keyframes mymove{0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}@-webkit-keyframes mymove{0%{opacity:1;}50%{opacity:0.5;}100%{opacity:0;}}</style>‘+str;
        appendHTML( document.querySelector(‘body‘) , str );
        setTimeout(function () {
            document.querySelector(‘body‘).removeChild(document.querySelector(‘.‘+type+‘-message‘));
        },time)
    }

showMessage(‘添加成功‘,‘success‘,2000)

https://blog.csdn.net/qq_42095753/article/details/90347845

以上是关于AJAX调用完成后的消息提示框的主要内容,如果未能解决你的问题,请参考以下文章

Qt显示Linux desktop natification气泡提示框

怎么用js做一个弹出消息提示框

ASP页面即时提示消息框代码

Ajax全局加载框(Loading效果)的配置

如何在没有提交事件的情况下显示 setCustomValidity 消息/工具提示

C#.NET 中 树节点的提示框(TOOLTIP)如何设置延迟时间