组件化bootstrap模态窗

今天遇到家长开通视频日期展示的问题，封装了bootstrap原生modal

!(function (window, $, undefined) {

    var messageModal = function (opt) {
        var defaults = {
            title: '查看详情',
            bodyText: '....',
            titleCss: {"fontSize": "16px", "text-align": "center"},
            bodyCss: {"fontSize": "12px", "text-align": "center"}
        }
        this.options = $.extend({}, defaults, opt);

        this.pbody = $(parent.body);

    }

    var html = {
        patentd: '<div class="modal message-modal-see" id="myModal"  style="display: block;background:rgba(0,0,0,0.2);"></div>',
        modalDialog: '<div class="modal-dialog" role="document"></div>',
        modalContent: '<div class="modal-content"></div>',
        modalHead: '<div class="modal-header"></div>',
        headBtn: '<button type="button" class="close close-modal" ><span aria-hidden="true">×</span></button>',
        headTitle: '<h4 class="modal-title" id="myModalLabel" style="text-align: center">视频开通详情</h4>',
        modalBody: ' <div class="modal-body"></div>',
        modalFooter: ' <div class="modal-footer"></div>',
        footerCbtn: ' <button type="button" class="btn btn-default close-modal" data-dismiss="modal">关闭</button>',

    }
    var fatherBody = $(window.top.document.body);
    messageModal.prototype = {
        createModal: function (ele) {
            $(html.headTitle).text(this.options.title).css(this.options.titleCss);
            var mobody = $(html.modalBody).css(this.options.bodyCss).append(this.options.bodyText);
            var content = $(html.modalContent).append(
                $(html.modalHead).append(html.headBtn).append($(html.headTitle))
            ).append(
                mobody
            ).append(
                $(html.modalFooter).append(html.footerCbtn)
            ).css('margin-top', '60%')

            var modal = $(html.patentd).append(
                $(html.modalDialog).append(
                    content
                )
            )

            modal.appendTo(fatherBody)
        },
        removeModal: function () {
            this.remove()
        },
    }

    $(parent.document).on('click', '.close-modal',  function () {
        $(parent.document).find('.message-modal-see').remove()
    });
    window.messageModal = messageModal
}(window, jQuery));

使用

                   <td data-studnet-times="${student.times}">
                            <c:if test="${fn:length(student.times)>1}">
                                ${fn:substring(student.times,1,22)}
                                <c:if test="${fn:length(student.times)>1}">
                                    <button class="btn  btn-info btn-xs see-more-times">查看更多</button>
                                </c:if>
                            </c:if>
                            <c:if test="${fn:length(student.times)==1}">
                                ${student.times}
                            </c:if>
                        </td>




$('.see-more-times').click(function (e) {
        var self = this;
        var dataTimes = $(self).parents('td').data('studnet-times');
        var data = dataTimes.substr(1, dataTimes.length - 2).replace(/—/g, '到').replace(/,/g, '</br>');
        var modal = new messageModal({
            bodyText: data,
            bodyCss: {"fontSize": "20px", "text-align": "center"}
        });
        modal.createModal()
    });

效果

image.png