【原創】基於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">
                        &times;
                    </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 =
    '<div class="loading-spinner" style="width: 200px; margin-left: -100px;">' +
    '<div class="progress progress-striped active">' +
      '<div class="progress-bar" style="width: 100%;"></div>' +
    '</div>' +
    '</div>';

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

    window.Modal = function () {
        var _tplHtml = '<div class="modal created-modal" id="[Id]">' +
                                        '<div class="modal-header">' +
                                            '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>' +
                                            '<h5 class="modal-title"><i class="icon-exclamation-sign"></i> [Title]</h5>' +
                                        '</div>' +
                                        '<div class="modal-body small">' +
                                            '<p>[Message]</p>' +
                                        '</div>' +
                                        '<div class="modal-footer" >' +
                                            '<button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>' +
                                            '<button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>' +
                                        '</div>' +
                            '</div>';

        var _tplLoadHtml = '<div class="modal created-modal" id="[Id]">' +
                                                '<div class="modal-header">' +
                                                    '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>' +
                                                    '<h5 class="modal-title">[Title]</h5>' +
                                                '</div>' +
                                                '<div class="modal-body small">' +
                                                    '<iframe src="[Url]" frameborder="0" width="100%" height="[Height]px" style="padding:0px; margin:0px;"></iframe>' +
                                                '</div>' +
                                        '</div>';

        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;
}
//這裏引入的文件要按照順序 <script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-modal/js/bootstrap-modal.js"></script>
<script src="~/Scripts/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
<script src="~/Scripts/feng_modal.js"></script>
<link href="~/Scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Scripts/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" />
<link href="~/Scripts/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" />
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div style="margin:500px" > 
        <button type="button" class="btn btn-primary" onclick="testalert()">測試alert</button>
        <button type="button" class="btn btn-success" onclick="testload()">測試load</button>
        <button type="button" class="btn btn-warning" onclick="testconfirm()">測試confirm</button>
        <button type="button" class="btn btn-danger">測試</button>
    </div>
</body>
</html>

<script type="text/javascript">

    function testalert() {
        Modal.alert({msg:"測試"});
    }

    function testload() {
        Modal.load({ msg: "測試", url: "/Home/GetMsg/", title: "遠程加載頁面", width: 1100, height: 650 });
    }

    function testconfirm() {
        Modal.confirm({ msg: "確認要加載嗎？" }).on(function (e) {
            if (e) {
                Modal.load({ msg: "測試", url: "/Home/GetMsg/", title: "遠程加載頁面", width: 1100, height: 650 });
            }
        });
    }

</script>

4.0看咱們達到的效果