弹出层案例

<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;
  }
  
  /*内容*/
  .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>我是标题客服经理开始</span>
  </div>
  <div class="v-close v-cancel">
      <span>x</span>
  </div>
</div>

<div class="v-content">
  <div class="v-info">
      我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
  </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 初始化时传递给构造函数的初始值
     */
    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);