# 弹框封装 * 调用方法 ~~~ $(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' }) } ~~~