前言：由於自己工作時多數是基於移動端的頁面工程，很多時候都需要用到彈窗元件，網上也有很多好用，五花八門的彈窗外掛，但是由於網上各個版本有些功能過於強大，導致外掛大小比較大，有些樣式不好自己進行各種自定義設計，有些則是達不到自己想要的那種需求，比如實現彈窗按鈕的各種回撥函式，於是自己就根據公司目前專案的需求 ，自己簡單封裝了一個彈窗元件。

可簡單自定義各式各樣的樣式

思路分析：

1. 宣告一個帶有物件引數的函式

var alert = function(param){...}

1. 對函式引數進行賦值拆分

var title = param.title,
    content = param.content,
    yes
 
Text = param.yesText || '確定',
    noText = param.noText,
    yesFn = param.yesFn,
    noFn = param.noFn;

1. 構建html結構

var htm = "";
htm += '<div class="lacy-alert"><div class="bgd">';
if (title) htm += '<header class="hd">' + title + '</header>';
htm += '<div class="bd">' + content + '</div
 
></div>';
if (!noText){
    htm += '<footer class="fd">' +
    '<a href="#" class=" alert-btn alert-btn-lg" data-role="closeBtn" id="yes_long_btn">' + yesText + '</a>' +
    '</footer>';
    htm += '</div>';
}
else{
    htm += '<footer class="fd">' +
    '<a href="#"
 
 class=" alert-btn alert-btn-st" id="yes_btn">' + yesText + '</a>' +
    '<a href="#" class=" alert-btn alert-btn-st" data-role="closeBtn">' + noText + '</a>' +
    '</footer>';
    htm += '</div>';
}

1. 將彈窗結構放入頁面

$("body").append(htm);

1. 彈窗按鈕處理

 var al = $(".lacy-alert");
 al.on("click", '[data-role="closeBtn"]', function() {
     $(".lacy-alert").remove();
 });

 $("#yes_btn,#yes_long_btn").bind("click" , function () {
     $(".lacy-alert").remove();
     if(param.yesFn){
         param.yesFn();
     }
     param = {};
 });

1. 函式呼叫

alert({
    title:'提示',
    content:'我是彈窗',
    noText:'no',
    yesText:'yes'
})

1. 自定義樣式

/*alert元件*/

.lacy-alert{position:fixed; top:50%;left:50%; z-index:1000; border-radius:12px; width:80%;  background:#fff;overflow: hidden;-webkit-transform:translateX( -50% ) translateY( -50% );transform:translateX( -50% ) translateY( -50% );  -webkit-box-sizing:border-box;  box-sizing:border-box; color: #484848;border: 1px #22b2e1 solid;max-width: 600px}
.lacy-alert .bgd{padding: .5rem;line-height: 1.5;}
.lacy-alert .hd{height:40px; line-height:40px; text-align: center;font-size:.9rem;}
.lacy-alert .bd{margin: 1rem .5rem 0;font-size:.75rem;height: 3.5rem;text-align: center}
.lacy-alert .bd p{font-size:14px; padding:0; line-height: 1.5em;}
.lacy-alert .fd{padding:.4rem 0; text-align:center;height: 2.4rem; line-height: 2.4rem}
.lacy-alert .alert-btn{ outline:none; display:inline-block !important; height:1.5rem; line-height:1.5rem; padding:0 16px; color:#fff; font-size:.9rem; text-align:center; vertical-align:middle; border:none; border-radius:4px; box-sizing:border-box;}
.lacy-alert .alert-btn-lg{width:30%;color:#22b2e1; text-align:center;border-radius: 8px;}
.lacy-alert .alert-btn-st{width:48%;color:#22b2e1; text-align:center;}