提示弹窗的封装

function showTip(tip, delay, position_top) { tip = tip || '出错，请检查'; position_top = position_top ? position_top : '50px'; position_top = (position_top.indexOf('px') >= 0 || position_top.indexOf('rem') >= 0 || position_top.indexOf('%') >= 0) ? position_top : position_top + 'px'; delay = delay || 3000; if ($('style').html().indexOf(".tip.show {top: " + position_top + " !important;}") < 0) { $('style').append(".tip.show {top: " + position_top + " !important;}"); } if ($('.tip').length !== 0) { $('.tip').remove(); } $('<div class="tip"><span>' + tip + '</span></div>') .appendTo('body'); setTimeout(function () { $('.tip').addClass('show'); }, 0); setTimeout( function () { $('.tip').removeClass('show'); setTimeout(function() { $('.tip').remove(); },1000 ); },delay ); return true; }

<style type="text/css"> .tip.show {top: 50px !important;} /*黑色弹框*/ div.tip { position: fixed; top: -50px; width: 100%; text-align: center; transition: top .5s ease-in-out; z-index: 999; } div.tip span { display: inline-block; min-width: 80%; max-width: 98%; padding: 5px 10px; text-align: center; font-size: 14px; color: #fff; background-color: rgba(0, 0, 0, 0.7); } </style>

showTip("弹窗");