基于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 (you@example.org)
 * @date    2016-11-10 17:04:35
 *
 *
 *说明：本方法基于bootstrap对模态框进行封装；
 *界面构造(必须给予madal控件ID)
    <!-- 弹出框 -->
    <div class="modal fade" >
        <!-- 窗口声明 -->
        <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" ></h4>
                </div>
                <div class="modal-body">
                    <div ></div>
                </div>
                <div class="modal-footer">
                    <button >确 定</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);
}

基于bootstrap模态框的alert弹窗

相关推荐