提示弹窗的封装

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("弹窗");
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页