# 警告框封裝 * 調用方法 ~~~ $(function($) { //警告框 var option = {} option.imgSrc = 'html/style/img/article/warm.png' warmFalse('測試') //成功框 warmSucces('測試') }); ~~~ * 警告框封裝 ~~~ function warmStyle(msg){ let imgSrc = 'html/style/img/article/warm.png' // let imgSrc = option && option.imgSrc ? option.imgSrc : 'html/style/img/article/succee.png' // console.log(imgSrc) let html = `<div class="comAlert warmfalse" id="nullSubs">` + `<img src="${imgSrc}" />` + `<span id="warmData">${msg}</span>` + `</div>` $('body').append(html) warmCss() } function warmFalse(msg){ warmStyle(msg) $('#nullSubs').fadeIn().delay(3000).fadeOut(300,function(){ $('#nullSubs').remove() }) } ~~~ * 成功框封裝 ~~~ function succesStyle(msg){ let html = `<div class="comAlert warmsucess" id="autoSubs">` + `<img src="html/style/img/article/succee.png" />` + `<span id="succeedData">${msg}</span>`+ `</div>` $('body').append(html) warmCss() } function warmSucces(msg){ succesStyle(msg) $('#autoSubs').fadeIn().delay(3000).fadeOut(300,function(){ $('#autoSubs').remove() }) } ~~~ * 警告框樣式 ~~~ function warmCss(){ $('.comAlert').css({ 'display':'none', 'position':'absolute', 'width':'280px', 'height':'30px', 'padding':'15px 20px 15px 15px', 'border-radius':'5px', 'text-align':'center', 'line-height':'30px', 'font-size':'16px', 'margin':'0 auto', 'position':'fixed', 'top':'15%', 'left':'0', 'right':'0', 'bottom':'0', 'overflow':'auto', 'z-index':'40' }) $('.comAlert img').css({ 'width':'20px', 'height':'20px', 'position':'absolute', 'left':'10%', 'top':'20px' }) $('.warmfalse').css({ 'border':':#fde2e2', 'color':'#DB7093', 'background-color':'#fef0f0' }) $('.warmsucess').css({ 'border':'#e1f3d8', 'color':'#67c23a', 'background-color':'#f0f9eb' }) } ~~~