基於bootstrap模態框的alert彈窗

完成的效果如下：

html代碼：

    <!-- 彈出框 -->
    <div class="modal fade" id="alert_like" tabindex="-1">
        <!-- 窗口聲明 -->
        <div class="modal-dialog modal-sm">
            <!-- 內容聲明 -->
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal"><span>&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel"></h4>
                </div>
                <div class="modal-body">
                    <div id="modal_con"></div>
                </div>
                <div class="modal-footer">
                    <button id="ok_btn" class="btn btn-sm btn-warning" data-dismiss="modal">確 定</button>
                </div>
            </div>
        </div>
    </div>

js代碼如下：

/**
 *
 * @authors chenDeChang ([e-mail])
 * @date    2016-11-10 17:04:35
 *
 *
 *說明：本方法基於bootstrap對模態框進行封裝；
 *界面構造(必須給予madal控件ID)
    <!-- 彈出框 -->
    <div class="modal fade" id="xxx" tabindex="-1">
        <!-- 窗口聲明 -->
        <div class="modal-dialog modal-sm">
            <!-- 內容聲明 -->
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal"><span>&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel"></h4>
                </div>
                <div class="modal-body">
                    <div id="modal_con"></div>
                </div>
                <div class="modal-footer">
                    <button id="ok_btn" class="btn btn-sm btn-warning">確 定</button>
                </div>
            </div>
        </div>
    </div>
 *調用代碼:
 * new show_modal({ modalId:"myModal",modalCon:'<p>這是提示的信息！</p>',bootstrapOptionObj:{show : true,backdrop : false}});
 *參數說明:
 *modalId:模態框控件的id，必需;
 *titleTxt:模態框控件的標題名稱;
 *modalCon:模態框控件主體內容;
 *bootstrapOptionObj:bootstrap模態框控件的方法屬性對象;
 *callback:處理完模態框后的回調方法;
 */

//顯示彈窗函數
var show_modal = function(setting){
    var _self = this;

    //判斷為null或者空值
    _self.IsNull = function(value) {
        if (typeof (value) == "function") { return false; }
        if (value == undefined || value == null || value == "" || value.length == 0) {
            return true;
        }
        return false;
    }
    //默認配置
    _self.DefautlSetting = {
        modalId:'',
        titleTxt: '溫馨提示',
        modalCon: '這是提示的信息！',
        bootstrapOptionObj: {show : true},
        callback: function() { }
    };
    //讀取配置
    _self.Setting = {
        modalId: _self.IsNull(setting.modalId) ? _self.DefautlSetting.modalId : setting.modalId,
        titleTxt: _self.IsNull(setting.titleTxt) ? _self.DefautlSetting.titleTxt : setting.titleTxt,
        modalCon: _self.IsNull(setting.modalCon) ? _self.DefautlSetting.modalCon : setting.modalCon,
        bootstrapOptionObj: _self.IsNull(setting.bootstrapOptionObj) ? _self.DefautlSetting.bootstrapOptionObj : setting.bootstrapOptionObj,
        callback: _self.IsNull(setting.callback) ? _self.DefautlSetting.callback : setting.callback
    };
    //定義函數操作
    _self.int = function(){
        if (_self.Setting.modalId == '') {
            return;
        }
        $("#myModalLabel").text(_self.Setting.titleTxt);//這里設置彈窗的標題
        $("#modal_con").append(_self.Setting.modalCon);//設置彈窗內容
        $("#"+_self.Setting.modalId).modal(_self.Setting.bootstrapOptionObj);//設置彈窗的bootstrap屬性方法
        _self.Setting.callback();
    }
    //執行操作
    _self.int();
}

//調用
 new show_modal({modalId:'alert_like',titleTxt:'牛逼閃閃的標題',modalCon:'<p>數據正在提交中...</p>',bootstrapOptionObj:{show:true,backdrop:false},callback:timeClose()});

//show_modal回調函數，4s后隱藏彈窗

function timeClose(){

setTimeout(function(){
$('#alert_like').modal('hide');
},4000);
}