简易弹框

js规范

现在发现写代码的部分规范化没有变，变得主要是打包将代码组织形式变化了。
从没有打包工具到打包工具层出不穷。

// 映入模块 (如果是临时一个页面里面的可以没有，去script引入js)
import * from word;
require a from pinying;

// 寻找节点，申明变量
$modal: $('#iModal'),
$modalTitle: $('#iModalTitle'),
$modalContent: $('#iModalContainer'),
$modalClose: $('#iModalClose'),
$modalSubmit: $('#iModalButton'),
modalType: 0,
loading: false,

// 绑定事件
bindEvents: function () {

}

// 事件处理函数
eventsFun: {
	show: function () {}
}

// 处理函数
handleFun: {

}

// 初始化
****.init();

html

        <div class="iModal-wrap" id="iModal">
            <div class="iModal">
                <div class="iModal-header">
                    <h3 id="iModalTitle"></h3>
                    <div class="iModal-close" id="iModalClose"></div>
                </div>
                <div class="iModal-content">
                    <div id="iModalContainer"></div>
                </div>
                <div class="iModal-footer">
                    <button type="button" id="iModalButton" class="btn fr">保存</button>
                </div>
            </div>
        </div>

css

    .iModal-wrap{ display:none; position:fixed; top:0; left:0; z-index:99; width:100%; height:100%; background-color:rgba(255,255,255,.2); }
    .iModal{ position:absolute; top:50%; left:50%; width:760px; margin-left:-400px;  padding:0 20px; border:1px solid #999; background-color:#fff; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%); box-shadow:0 4px 10px 0 rgba(0,0,0,.4); -webkit-animation:modalIn .3s both; -moz-animation:modalIn .3s both; animation:modalIn .3s both; }
    .iModal-header{ position:relative; height:60px; line-height:60px; overflow:hidden; }
    .iModal-close{ position:absolute; top:10px; right:0; width:40px; height:40px; cursor:pointer; }
    .iModal-close:before,
    .iModal-close:after{ content:''; position:absolute; top:50%; right:0; width:14px; height:1px; margin-left:-10px; background-color:#999; transition:.3s; }
    .iModal-close:before{ -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); transform:rotate(45deg); }
    .iModal-close:after{ -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); transform:rotate(-45deg); }
    .iModal-close:hover:before,
    .iModal-close:hover:after{ background-color:#333; }

    .iModal-content{ max-height:480px; line-height:34px; overflow:auto; }
    .iModal-content-item{ margin:0 0 10px 20px; overflow:hidden; }
    .iModal-content-item *{ float:left; }
    .iModal-content-item label{ width:120px; margin:0; line-height:34px; }
    .iModal-content-item input,
    .iModal-content-item select{ box-sizing:border-box; height:34px; padding:0 10px; }

    .iModal-footer{ height:30px; padding:20px 0 15px; }
    .iModal-button{ float:right; }

    @-webkit-keyframes modalIn{
        from{opacity:0; -webkit-transform:translate3d(0,-56%,0);}
    }
    @-moz-keyframes modalIn{
        from{opacity:0; -moz-transform:translate3d(0,-56%,0);}
    }
    @keyframes modalIn{
        from{opacity:0; transform:translate3d(0,-56%,0);}
    }

js

<script>
    $(function() {
        var main = {
            $batchReview: $('#batchReview'),
            $aDebtor: $('.debtor'),
            $aPassed: $('.passed'),
            $aFailure: $('.failure'),
            $aEdit: $('.edit'),

            $modal: $('#iModal'),
            $modalTitle: $('#iModalTitle'),
            $modalContent: $('#iModalContainer'),
            $modalClose: $('#iModalClose'),
            $modalSubmit: $('#iModalButton'),
            modalType: 0,

            loading: false,

            init: function() {
                this.bindEvents();
            },

            showModal: function(title, content) {
                this.$modalTitle.html(title);
                this.$modalContent.html(content);
                this.$modal.fadeIn(200);
            },

            buildDebtorInfo: function(data) {
                return  '<div class="iModal-content-item">'
                        + '    <label>姓名:</label>'
                        + '    <input type="text" name="name" value="' + data.name + '">'
                        + '</div>'
                        + '<input type="hidden" name="projectId" value="' + data.projectId + '">';
            },

            getDebtorInfo: function(projectId) {
                if (this.loading) return;

                $.ajax({
                    url: 'apiUrl',
                    type: 'get',
                    data: {},
                    context: this,
                    beforeSend: function() {
                        this.loading = true;
                    },
                    success: function(res) {
                        if (res.code === 0) {
                            this.modalType = 0;
                            this.showModal('信息', this.buildDebtorInfo(res.data));
                        } else {
                            bootbox.alert(res.message);
                        }
                    },
                    complete: function() {
                        this.loading = false;
                    }
                })
            },

            updateDebtorInfo: function() {
                if (this.loading) return;

                $.ajax({})
            },

            buildProjectInfo: function($row) {
                var deadlineValue = $row.find('.deadline').attr('data-value'),
                    repaymentTypeValue = $row.find('.repaymentType').attr('data-value')

                return  '<div class="iModal-content-item">'
                        + '    <label>标题:</label>'
                        + '    <input type="text" name="title" value="' + $row.find('.title').html() + '" style="width:500px;">'
                        + '</div>'
                        + '<div class="iModal-content-item">'
                        + '    <label>项目类型:</label>'
                        + '    <span>' + $row.find('.type').html() + '</span>'
                        + '</div>';
            },

            updateProjectInfo: function() {
                if (this.loading) return;

                $.ajax({})
            },

            getMoldalFormData: function() {
                var formData = {};

                this.$modal.find('input, select, textarea').each(function() {
                    if ($(this).attr('name')) {
                        formData[$(this).attr('name')] = $(this).val();
                    }
                })

                return JSON.stringify(formData);
            },

            bindEvents: function() {
                var that = this;

                this.$batchReview.on('click', function() {
                    var data = $('.check:checked').parents('tr').map(function() {
                        return $(this).find('.projectid').text();
                    }).get();

                    if (data.length) {
                        bootbox.confirm('确认通过？', '取消', '确认', function() {
                            that.prjAuditBatch(data);
                        })
                    } else {
                        bootbox.alert('请选择标的！')
                    }
                })

                this.$aDebtor.on('click', function() {
                    that.getDebtorInfo($(this).parents('tr').find('.projectid').html());
                })

                this.$aPassed.on('click', function() {
                    bootbox.confirm('确认通过？', '取消', '确认', function() {
                        that.verify($(this).parents('tr').find('.projectid').html(), 2);
                    })
                })

                this.$aFailure.on('click', function() {
                    bootbox.confirm('确认拒绝？', '取消', '确认', function() {
                        that.verify($(this).parents('tr').find('.projectid').html(), 1);
                    })
                })

                this.$aEdit.on('click', function() {
                    that.modalType = 1;
                    that.showModal('信息', that.buildProjectInfo($(this).parents('tr')));
                })



                this.$modalClose.on('click', function() {
                    that.$modal.stop().fadeOut(200);
                })

                this.$modalSubmit.on('click', function() {})
            },

            verify: function(projectId, status) {
                if (this.loading) return;

                $.ajax({})
            },

            prjAuditBatch: function(data) {
                if (this.loading) return;

                $.ajax({})
            }

        }

        main.init();
    })
</script>