遇到的问题

1.模态框的原理：

点击按钮的时候，在body里面添加一个大的div，宽高100%，固定定位，设置一个透明度，我们叫这个div为cover层，然后再添加一个div，宽高自定义，固定定位在屏幕中间，这个div作为我们的模态框，样式内容自己根据需要编写，再次点击按钮，将这2个div移除。

2.模态框的抽象：

因为要抽象成一个组件，所以模态框的cover层和模态框都放到js里面动态生成。整体结构上，我们定义一个Window构造函数：

function Window() {
}
Window.prototype={
   alert:function () {

   },
   confirm:function () {
      
   },
   prompt:function () {
      
   }
};

因为这个模态框的宽高或者其他属性要可以定制，所以alert要接收一个参数，因为参数数量不确定，所以参数的对象为对象比较好，同时，我们要给这些属性加一个默认值，所以我们在构造函数内部也要写一个对象。具体代码如下：

function Window() {
   this.config = {
      width: 500,
      height: 300,
   }
}

Window.prototype = {
   alert: function (config) {
      var CFG = $.extend(this.config, config)
}

$.extend用来将传进来的对象与构造函数默认的对象合并，如果有相同的属性，后者会覆盖前者。大致的抽象思路如上所述。

1. 收获
   

2. 1.学会了如何封装一个模态框。