【原创】基于Bootstrap的Modal二次封装

前言

Bootstrap：Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架

官方网站：http://www.bootcss.com/

1.Bootstrap Modals（模态框）基本用法

使用bootstrap之前需要应用jquery.js和bootstrap.js以及bootstrap.css 注意：最新版的bootstrap需要和jquery1.9以上版本配合使用

    
    <button class="btn btn-primary btn-lg" data-toggle="modal"
            data-target="#myModal">
        开始演示模态框
    button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        ×
                    button>
                    <h4 class="modal-title" id="myModalLabel">
                        模态框（Modal）标题
                    h4>
                div>
                <div class="modal-body">
                    在这里添加一些文本
                div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">
                        关闭
                    button>
                    <button type="button" class="btn btn-primary">
                        提交更改
                    button>
                div>
            div>
        div>
    div>

当我们点击button的时候会触发Modal,效果如下图所示

 2.0先看我们的封装代码

$(function () {
    if ($.fn.modal) {
        $.fn.modal.defaults.spinner = $.fn.modalmanager.defaults.spinner =
    '
' +
    '
' +
      '
' +
    '' +
    '';

        $.fn.modalmanager.defaults.resize = true;
    }

    window.Modal = function () {
        var _tplHtml = '
' +
                                        '
' +
                                            '×Close' +
                                            '
 [Title]' +
                                        '' +
                                        '
' +
                                            '
[Message]' +
                                        '' +
                                        '
' +
                                            '[BtnOk]' +
                                            '[BtnCancel]' +
                                        '' +
                            '';

        var _tplLoadHtml = '
' +
                                                '
' +
                                                    '×Close' +
                                                    '
[Title]' +
                                                '' +
                                                '
' +
                                                    '' +
                                                '' +
                                        '';

        var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');

        var _alert = function (options) {
            var id = _dialog(options);
            var modal = $('#' + id);
            modal.find('.ok').removeClass('btn-success').addClass('btn-primary');
            modal.find('.cancel').hide();

            return {
                id: id,
                on: function (callback) {
                    if (callback && callback instanceof Function) {
                        modal.find('.ok').click(function () { callback(true); });
                    }
                },
                hide: function (callback) {
                    if (callback && callback instanceof Function) {
                        modal.on('hide.bs.modal', function (e) {
                            callback(e);
                        });
                    }
                }
            };
        };

        var _confirm = function (options) {
            var id = _dialog(options);
            var modal = $('#' + id);
            modal.find('.ok').removeClass('btn-primary').addClass('btn-success');
            modal.find('.cancel').show();

            return {
                id: id,
                on: function (callback) {
                    if (callback && callback instanceof Function) {
                        modal.find('.ok').click(function () { callback(true); });
                        modal.find('.cancel').click(function () { callback(false); });
                    }
                },
                hide: function (callback) {
                    if (callback && callback instanceof Function) {
                        modal.on('hide.bs.modal', function (e) {
                            callback(e);
                        });
                    }
                }
            };
        };

        var _load = function (options) {
            var ops = {
                url: '',
                title: '',
                width: 800,
                height: 550
            };
            $.extend(ops, options);
            var modalId = _getId();
            var html = _tplLoadHtml.replace(reg, function (node, key) {
                return {
                    Id: modalId,
                    Title: ops.title,
                    Url: ops.url,
                    Height: ops.height
                }[key];
            });

            $('body').append(html);
            var modal = $('#' + modalId).modal({
                width: ops.width
            });

            $('#' + modalId).on('hide.bs.modal', function (e) {
                $(this).parent('.modal-scrollable').next().remove();
                $(this).parent('.modal-scrollable').remove();
                $('body').modalmanager('toggleModalOpen');
            });
        }

        var _getId = function () {
            var date = new Date();
            return 'mdl' + date.valueOf();
        }

        var _dialog = function (options) {
            var ops = {
                msg: "提示内容",
                title: "操作提示",
                btnok: "确定",
                btncl: "取消",
                width: 400,
                auto: false
            };

            $.extend(ops, options);

            var modalId = _getId();

            var html = _tplHtml.replace(reg, function (node, key) {
                return {
                    Id: modalId,
                    Title: ops.title,
                    Message: ops.msg,
                    BtnOk: ops.btnok,
                    BtnCancel: ops.btncl
                }[key];
            });

            $('body').append(html);
            $('#' + modalId).modal({
                width: ops.width,
                backdrop: 'static'
            });

            $('#' + modalId).on('hide.bs.modal', function (e) {
                //$(this).parent('.modal-scrollable').next().remove();
                //$(this).parent('.modal-scrollable').remove();
                $('body').modalmanager('toggleModalOpen');
            });

            return modalId;
        }

        var _cancelCheckbox = function () {
            //设置取消样式
            $(".datagrid-header-check .checker").find("span").attr("class", "");//取消头部第一个checkbox的样式
            $(".datagrid-cell-check .checker").find("span").attr("class", "");//取消列表选中checkbox的样式
            $(".datagrid-btable").find("tr").attr("class", "datagrid-row");//取消选中行的样式
            $(":checkbox:checked").attr("checked", false); //取消所有选中状态
        };


        return {
            alert: _alert,
            confirm: _confirm,
            load: _load,
            cancelcheck: _cancelCheckbox,
            loading: function () {
                $('body').modalmanager('loading');
            },
            removeLoading: function () {
                $('body').modalmanager('removeLoading');
            }
        }

    }();

});

3.0接下来看我们的案例代码

@{
    Layout = null;
}
//这里引入的文件要按照顺序





"~/Scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
"~/Scripts/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" />
"~/Scripts/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" />




    "viewport" content="width=device-width" />
    


    
"margin:500px" > 
        "button" class="btn btn-primary" οnclick="testalert()">测试alert
        "button" class="btn btn-success" οnclick="testload()">测试load
        "button" class="btn btn-warning" οnclick="testconfirm()">测试confirm
        "button" class="btn btn-danger">测试
    

4.0看我们达到的效果

转载于:https://www.cnblogs.com/fenglingyi/p/4284307.html