利用JS封装代码，将用户登录与发表文章弹窗封装起来_2018年10月10日

利用JS封装代码，将用户登录与发表文章弹窗封装起来_2018年10月10日

前面调用代码：

首先要引入JQuery和bootsrtap两个JS文件和要用到的bootsrtap的css代码。

然后将弹窗封装到一个js文件中，引用这个js文件，然后调用来调用里面的封装的对象。

下面先把js代码

实例

let UI = {
    alert:function (obj) {
        let title = (obj == undefined || obj.title == undefined ) ? '系统提示' : obj.title;
        let message = (obj == undefined || obj.message == undefined ) ? '' : obj.message;
        let icon = (obj == undefined || obj.icon == undefined) ? 'warm' : obj.icon;
        let html = UI.getAlertHtml();
        html = html.replace('{title}',title);
        html = html.replace('{message}',message);
        html = html.replace('{icon}',icon);
        $('body').append(html);
        $('#UI_madal_sm').modal({backdrop:'static'});
        $('#UI_madal_sm').modal('show');
        $('#UI_madal_sm').on('hidden.bs.modal', function (e) {
            $('#UI_madal_sm').remove();
        })
    },
    open:function (obj) {
        let title = (obj == undefined || obj.title == undefined ) ? '' : obj.title;
        let width = (obj == undefined || obj.width == undefined) ? '500' : obj.width;
        let height = (obj == undefined || obj.height == undefined) ? '450' : obj.height;
        let html = UI.getOpenHtml();
        html = html.replace('{title}',title);

        $('body').append(html);
        $('#UI_open_lg .modal-lg').css('width',width);
        $('#UI_open_lg .modal-body').css('height',height);
        $('#UI_open_lg iframe').attr('src',obj.url);
        $('#UI_open_lg').modal({backdrop: 'static'});
        $('#UI_open_lg').modal('show');
    },
    getOpenHtml:function () {
        let html = '<div class="modal fade bs-example-modal-lg" id="UI_open_lg">\
                            <div class="modal-dialog modal-lg" role="document">\
                                 <div class="modal-content">\
                                     <div class="modal-header">\
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>\
                                            <h4 class="modal-title">{title}</h4>\
                                      </div>\
                                    <div class="modal-body">\
                             <iframe frameborder="0" width="100%" height="100%" scrolling="auto"></iframe>\
                            </div>\
                           <div class="modal-footer">\
                          <button type="button" class="btn btn-primary">确认</button>\
                           </div>\
                          </div>\
                         </div>\
                          </div>';
        return html;
    },
    getAlertHtml:function () {
        let html = '<div class="modal fade bs-example-modal-sm" id="UI_madal_sm">\
                            <div class="modal-dialog modal-sm" role="document">\
                                 <div class="modal-content">\
                                     <div class="modal-header">\
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>\
                                            <h4 class="modal-title">{title}</h4>\
                                      </div>\
                                    <div class="modal-body">\
                             <p><img src="static/image/{icon}.png" style="margin-right: 10px">{message}</p>\
                            </div>\
                           <div class="modal-footer">\
                          <button type="button" class="btn btn-primary">确认</button>\
                           </div>\
                          </div>\
                         </div>\
                          </div>';
        return html;
    }
}

下面再放前面的调用代码

<script type="text/javascript">
function login() {
   UI.alert({title:'警告提示',message:'请重新输入',icon:'ok'});
   UI.open({height:'600',width:'500',title:'发布文章',url:'http://www.qq.com'});
}
</script>

给登录按钮加一个onclick="login()"来调用触发事件。