# 彈框封裝 * 調用方法 ~~~ $(function($) { var option = {} option.title = '提醒' option.list=[ { name:'確定', fun:'yesBtn', clas:'alert_bottons' }, { name:'取消', fun:'closeAlert' } ] alertMessage('內容',option) }); ~~~ * 彈框（message:彈框信息 option:title-彈框標題 list[{name,fun,clas}]-彈框按鈕(名字，回調函數，樣式)） ~~~ function alertMessage(message,option){ let title = option && option.title ? option.title : ' '; let btns = option && option.list ? option.list : [{name:'確定',fun:'con'}]; let html = `<div class="alert_object" id='alert_content'>` + //彈框容器 `<div class="alert_box">` + //彈框內容 `<div class="alert_box1">` + //彈框標題 `<span>${title}</span>` + `</div>` + `<div class="alert_box2">` + // 彈框信息 `<i class="v8 sbh-icon-test"></i>` + `<span>${message}</span>` + `</div>`+ `<div class="alert_box3">`// 彈框按鈕 let htmlBtn = '' for(let i in btns){ htmlBtn += `<div class="alert_botton ${btns[i].clas}" onclick='Btn("${btns[i].fun}")'>${btns[i].name}</div>` } let htmlBottom = '</div></div></div>' html = html + htmlBtn + htmlBottom $('body').append(html) alertCss() } ~~~ * 點擊事件(調用回調函數) ~~~ function Btn(fun){ eval(fun+'();'); } ~~~ * 關閉彈框 ~~~ function closeAlert(){ $('#alert_content').remove(); } ~~~ * css樣式 ~~~ function alertCss(){ $('.alert_object').css({ 'position':'fixed', 'width':'100%', 'height':'100%', 'top':'0', 'left':'0', 'right':'0', 'bottom':'0', 'overflow':'auto', 'background-color':'rgb(0,0,0,.4)', 'z-index':'40' }) $('.alert_box').css({ 'width':'420px', 'height':'132px', 'padding-bottom':'10px', 'vertical-align':'middle', 'background-color':'#fff', 'border-radius':'5px', 'border':'solid 1px #ebeef5', 'font-size':'18px', 'box-shadow':'0 2px 12px 0 rgba(0,0,0,.1)', 'overflow':'hidden', 'margin':'200px auto' }) $('.alert_box1').css({ 'width':'420px', 'height':'42px', 'padding':'15px 15px 10px 15px', 'box-sizing':'border-box', 'font-size':'20px', 'color':'rgb(0,0,0,0.8)' }) $('.alert_box2').css({ 'width':'420px', 'height':'44px', 'padding':'10px 15px', 'color':'#606266', 'font-size':'16px', 'box-sizing':'border-box' }) $('.alert_box2 i').css({ 'color':'#FFA500', 'font-size':'26px', 'display':'block', 'line-height':'28px', 'float':'left', 'margin-right':'10px' }) $('.alert_box3').css({ 'margin-top':'10px', 'width':'420px', 'height':'36px', 'padding':'0 15px 5px 0', 'display':'flex', 'box-sizing':'border-box', 'justify-content':'flex-end' }) $('.alert_botton').css({ 'font-size':'12px', 'border-radius':'3px', 'cursor':'pointer', 'text-align':'center', 'font-weight':'500', 'width':'68px', 'height':'31px', 'line-height':'31px', 'background-color':'#fff', 'border':'solid 1px #dcdfe6', 'color':'#606266', 'margin-right':'5px' }) $('.alert_bottons').css({ 'color':'#fff', 'background-color':'#409eff', 'border-color':'#409eff', 'margin-left':'15px' }) } ~~~