Before writing because some validation, will be used after the call success or failure of some of the message box, but did not find a find a lot more appropriate for some of the components in the frame with the feeling is not very convenient, so they used to write js a simple message box, the code is as follows:
var appendHTML = function (EL, HTML) { var divTemp = document.createElement ( "div"), Nodes = null // document fragments, disposable append, to improve performance , the 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 ( to true )); } el.appendChild (the fragment ); // It is said that following this way the world will be more clean Nodes = null ; the fragment= null; }; function showMessage(message,type,time) { let str = '' switch (type) { case 'success': str = '<div class="success-message" style="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">\n' + ' <span class="mes-text">'+message+'</span></div>'break; case 'error': str = '<div class="error-message" style="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">\n' + ' <span class="mes-text">'+message+'</span></div>' } appendHTML( document.querySelector('body') , str ); setTimeout(function () { document.querySelector('body').removeChild(document.querySelector('.'+type+'-message')); },Time) 'added successfully', 'success', 221000) showMessage ( }