<style type="text/css">
  /*遮罩層*/
  .v-masklayer {
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      background-color: #000000;
      opacity: 0.3;
  }
  
  /*彈框樣式*/
  .v-popup-wrap{
      width: 600px;
      height: 300px;
      position: absolute;
      border: 1px solid #E8E8E8;
      border-radius: 5px;
      background-color: #FFFFFF;
      top: 50%;
      left: 50%;
      margin-top: -150px;
      margin-left: -300px;
      padding: 10px 20px;
      color: #333333;
      font-size: 14px;
      font-family: "微軟雅黑";
      box-sizing: border-box;
  }
  
  
  /*頭部樣式*/
  .v-header {
      position: relative;
      border-bottom: 1px solid #E8E8E8;
  }
  .v-title{
      line-height: 1;
      font-size: 16px;
      padding: 10px 35px 10px 0px;
      padding-right: 35px;
  }
  .v-close {
      width: 20px;
      height: 20px;
      line-height: 1;
      font-size: 18px;
      color: #D3D3D3;
      text-align: center;
      margin-top: -10px;
      cursor: pointer;
      position: absolute;
      top: 50%;
      right: 0px;
  }
  
  /*內(nèi)容*/
  .v-content{
      max-height: 200px;
      overflow-y: scroll;
  }
  
  
  /*尾部樣式*/
  .v-footer {
      width: 100%;
      position: absolute;
      bottom: 10px;
      left: 0px;
      box-sizing: border-box;
  }
  .v-footer .v-ctrl {
      margin: 0px 20px;
      padding-top: 10px;
      border-top: 1px solid #E8E8E8;
  }
  .v-footer .btn{
      display: inline-block;
      border: 1px solid #E8E8E8;
      border-radius: 15px;
      padding: 5px 20px;
      float: right;
      cursor: pointer;
  }
  .v-footer .on{
      background-color: #07a0FF;
  }
  .v-footer .v-cancel{
      margin-left: 10px;
  }


  /*清楚浮動*/
  .v-clearfix:after,.v-clearfix:before {
      content: "";
      display: block;
      zoom: 1;
  }
  .v-clearfix:after{
      clear: both;
  }
</style>

<div class="v-header">
  <div class="v-title">
      <span>我是標(biāo)題客服經(jīng)理開始</span>
  </div>
  <div class="v-close v-cancel">
      <span>x</span>
  </div>
</div>

<div class="v-content">
  <div class="v-info">
      我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容
  </div>
</div>

<div class="v-footer">
  <div class="v-ctrl v-clearfix">
      <div class="btn v-cancel">取消</div>
      <div class="btn v-save on">確定</div>
  </div>
</div>

(function(win, $){
    /**
     * 為window綁定一個對象(Popups),該對象的作用是生成一個彈出層
     * @param {Object} options 初始化時傳遞給構(gòu)造函數(shù)的初始值
     */
    win.Popups = {
        open: function(options){
            options = options || {};
            this.title = options.title;
            this.content = options.content;
            this.init();
        },
        init: function(){
            var _this = this;
            
            $('body').append('<div id="v_maskLayer" class="v-masklayer"></div>');
            $('body').append('<div id="v_popup_wrap" class="v-popup-wrap"></div>');
            $('#v_popup_wrap').load('./mainContent.html', function(){
                console.log(1)
            });
            
            _this.event();
        },
        event: function(){
            var _this = this;
            
            $('#v_popup_wrap').off('click').on('click', '.v-save', function(){
                                
            });
            
            $('#v_popup_wrap').off('click').on('click', '.v-cancel', function(){
                _this.closePopup();
            });
        },
        closePopup: function(){
            $('body').find('#v_popup_wrap').remove();
            $('body').find('#v_maskLayer').remove();
        }
    };
    
    
    
})(window,jQuery);