警告弹窗的图标是用base64写的,不需要额外引入图片,尽量减少引入需要;PC、移动端都能用
调用代码:
// 弹窗类型:success, warning, error, info new infoPromptBox({ type: 'success', width: 300, showTime: 3000, title: '成功' })
插件源码:
(function () { function infoPromptBox(option) { if (!document.getElementById('infoPromptBoxStyle')) { //添加样式 var style = document.createElement('style'); style.type = 'text/css'; style.id = 'infoPromptBoxStyle' style.innerHTML=` #infoPromptBox{ position: fixed; top: 30px; left: 50%; transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); z-index: 999; } .infoPromptBox_line{ min-width: 200px; padding: 10px 10px 5px 10px; margin: 10px 0; position: relative; color: #fff; box-shadow: 0 0 12px #999; border-radius: 3px 3px 3px 3px; opacity: 0; transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s; } .infoPromptBox_lineShow{ opacity: 1; } .infoPromptBox_line_title{ width: calc(100% - 55px); position: absolute; top: 50%; margin: -11px 0 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .infoPromptBox_icon{ width: 24px; height: 24px; display: inline-block; } .infoPromptBox_success{ background: #67C23A } .infoPromptBox_success > .infoPromptBox_icon{ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg=='); } .infoPromptBox_warning{ background: #E6A23C } .infoPromptBox_warning > .infoPromptBox_icon{ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII='); } .infoPromptBox_error{ background: #F56C6C } .infoPromptBox_error > .infoPromptBox_icon{ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII='); } .infoPromptBox_info{ background: #3DACCB } .infoPromptBox_info > .infoPromptBox_icon{ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII='); } `; document.getElementsByTagName('head').item(0).appendChild(style); } option = option ? option : {} option.title = option.title ? option.title : "标题" option.type = option.type ? option.type : 'success' // success, warning, error, info option.width = option.width ? option.width : 200 option.showTime = option.showTime ? option.showTime : 2000 var infoPromptBox = document.getElementById("infoPromptBox"); if (!infoPromptBox) { var body = document.getElementsByTagName("body")[0]; body.insertAdjacentHTML("beforeEnd", '<div id="infoPromptBox"></div>' ); } var infoPromptBox = document.getElementById("infoPromptBox"); infoPromptBox.insertAdjacentHTML("beforeEnd", '<div class="infoPromptBox_line infoPromptBox_'+option.type+'">'+ '<i class="infoPromptBox_icon"></i>'+ '<span class="infoPromptBox_line_title">'+option.title+'</span>'+ '</div>' ); var lastLineBox = infoPromptBox.lastElementChild; setTimeout(function() { // 显示弹窗,定时器延时是为了触发动画 lastLineBox.classList.add("infoPromptBox_lineShow"); }, 100); function BoxHide() { var LineBox = document.getElementsByClassName('infoPromptBox_line') // console.log(LineBox) var thisBox = LineBox[0] thisBox.classList.remove("infoPromptBox_lineShow"); setTimeout(function () { thisBox.remove(); var LineBox = document.getElementsByClassName('infoPromptBox_line') if (LineBox.length) { BoxHide() }else{ var infoPromptBox = document.getElementById("infoPromptBox"); if (infoPromptBox) { infoPromptBox.remove(); } } }, 600); } setTimeout(function () { BoxHide() }, option.showTime); }; window.infoPromptBox = infoPromptBox })()