diff --git a/karma.conf.js b/karma.conf.js
index 9c47721..8c3c5ed 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -4,16 +4,23 @@ module.exports = function(config) {
     frameworks: ['jasmine', 'karma-typescript'],
 
     files: [
+      {
+        pattern: 'https://cdnjs.cloudflare.com/ajax/libs/jasmine-ajax/3.3.1/mock-ajax.min.js'
+      },
+      {
+        pattern: 'src/*.scss'
+      },
       {
         pattern: 'src/*.ts'
       }
     ],
 
     preprocessors: {
-      '**/*.ts': ['karma-typescript']
+      'src/*.ts': ['karma-typescript'],
+      'src/*.scss': ['scss'],
     },
 
-    reporters: ['dots', 'karma-typescript'],
+    reporters: ['mocha', 'karma-typescript'],
 
     coverageReporter: {
       type: 'lcov',
diff --git a/package.json b/package.json
index 7767d96..8cffab9 100644
--- a/package.json
+++ b/package.json
@@ -34,8 +34,11 @@
     "karma-cli": "^1.0.1",
     "karma-coveralls": "^1.1.2",
     "karma-jasmine": "^1.1.0",
+    "karma-mocha-reporter": "^2.2.1",
+    "karma-scss-preprocessor": "^2.0.0",
     "karma-typescript": "^2.1.5",
     "matchdep": "^1.0.1",
+    "node-sass": "^4.1.1",
     "time-grunt": "^1.4.0",
     "tslint": "^4.2.0",
     "typescript": "^2.1.4"
diff --git a/src/custombox.spec.ts b/src/custombox.spec.ts
index 8e84dec..e85f88e 100644
--- a/src/custombox.spec.ts
+++ b/src/custombox.spec.ts
@@ -2,400 +2,622 @@ function hasElement(element: string): boolean {
   return document.body.contains(document.querySelector(element));
 }
 
-describe('Custombox #methods', () => {
-  let originalTimeout;
-  beforeEach(function() {
-    originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
-    jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
-  });
+describe('Custombox', () => {
+  describe('Methods', () => {
+    let originalTimeout;
+    beforeEach(() => {
+      originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
+      jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+    });
 
-  beforeEach(() => {
-    for (let i = 1; i < 3; i++) {
-      let div = document.createElement('div');
-      div.innerHTML = `Lorem ipmsum (${i}) ...`;
-      div.setAttribute('id', `foo-${i}`);
-      document.body.appendChild(div);
-    }
-  });
+    beforeEach(() => {
+      for (let i = 1; i < 3; i++) {
+        let div = document.createElement('div');
+        div.innerHTML = `Lorem ipmsum (${i}) ...`;
+        div.setAttribute('id', `foo-${i}`);
+        document.body.appendChild(div);
+      }
+    });
 
-  afterEach(()=> {
-    for (let i = 1; i < 3; i++) {
-      let elem = document.getElementById(`foo-${i}`);
-      elem.parentNode.removeChild(elem);
-    }
+    afterEach(()=> {
+      for (let i = 1; i < 3; i++) {
+        let elem = document.getElementById(`foo-${i}`);
+        elem.parentNode.removeChild(elem);
+      }
 
-    // custombox-content
-    let contents = document.querySelectorAll('.custombox-content');
-    for (let i = 0, t = contents.length; i < t; i++) {
-      contents[i].parentNode.removeChild(contents[i]);
-    }
+      // custombox-content
+      let contents = document.querySelectorAll('.custombox-content');
+      for (let i = 0, t = contents.length; i < t; i++) {
+        contents[i].parentNode.removeChild(contents[i]);
+      }
 
-    // custombox-overlay
-    let overlays = document.querySelectorAll('.custombox-overlay');
-    for (let i = 0, t = overlays.length; i < t; i++) {
-      overlays[i].parentNode.removeChild(overlays[i]);
-    }
+      // custombox-overlay
+      let overlays = document.querySelectorAll('.custombox-overlay');
+      for (let i = 0, t = overlays.length; i < t; i++) {
+        overlays[i].parentNode.removeChild(overlays[i]);
+      }
 
-    delete Custombox;
+      delete Custombox;
 
-    jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
-  });
+      jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
+    });
 
-  it('should have been initialized', (done) => {
-    new (Custombox as any).modal({
-      content: {
-        effect: 'fall',
-        target: '#foo-1',
-      }
+    it('should have been initialized', (done) => {
+      new (Custombox as any).modal({
+        content: {
+          effect: 'fall',
+          target: '#foo-1',
+        }
+      });
+
+      setTimeout(() => {
+        expect(hasElement('.custombox-content')).toBe(false);
+        done();
+      }, 200);
     });
 
-    setTimeout(() => {
-      expect(hasElement('.custombox-content')).toBe(false);
-      done();
-    }, 200);
-  });
+    it('should have opened', (done) => {
+      new (Custombox as any).modal({
+        content: {
+          effect: 'fall',
+          target: '#foo-1',
+        },
+        overlay: {
+          active: false
+        }
+      }).open();
+
+      setTimeout(() => {
+        expect(hasElement('.custombox-content')).toBe(true);
+        expect(hasElement('.custombox-open')).toBe(true);
+        expect(hasElement('.custombox-close')).toBe(false);
+        done();
+      }, 200);
+    });
+
+    it('should have closed', (done) => {
+      new (Custombox as any).modal({
+        content: {
+          effect: 'fall',
+          target: '#foo-1',
+          speedOut: 0,
+          speedIn: 0,
+        },
+        overlay: {
+          active: false
+        }
+      }).open();
+
+      setTimeout(() => {
+        expect(hasElement('.custombox-open')).toBe(true);
+        expect(hasElement('.custombox-close')).toBe(false);
+
+        Custombox.modal.close();
+
+        expect(hasElement('.custombox-open')).toBe(false);
+        expect(hasElement('.custombox-close')).toBe(true);
+        done();
+      }, 200);
+    });
+
+    it('should have closed by ID', (done) => {
+      const ID: string = 'my-custom-id';
+
+      new (Custombox as any).modal({
+        content: {
+          effect: 'fall',
+          target: '#foo-1',
+          id: ID
+        },
+        overlay: {
+          active: false
+        }
+      }).open();
+
+      setTimeout(() => {
+        expect(hasElement(`#custombox-${ID}`)).toBe(true);
+        Custombox.modal.close(ID);
+        expect(hasElement('.custombox-close')).toBe(true);
+        done();
+      }, 200);
+    });
 
-  it('should have opened', (done) => {
-    new (Custombox as any).modal({
-      content: {
-        effect: 'fall',
-        target: '#foo-1',
-      },
-      overlay: {
-        active: false
+    it('should have open two consecutive modals', (done) => {
+      for (let i = 1; i < 3; i++) {
+        new (Custombox as any).modal({
+          content: {
+            effect: 'fadein',
+            target: `#foo-${i}`,
+          },
+        }).open();
       }
-    }).open();
-
-    setTimeout(() => {
-      expect(hasElement('.custombox-content')).toBe(true);
-      expect(hasElement('.custombox-open')).toBe(true);
-      expect(hasElement('.custombox-close')).toBe(false);
-      done();
-    }, 200);
-  });
 
-  it('should have closed', (done) => {
-    new (Custombox as any).modal({
-      content: {
-        effect: 'fall',
-        target: '#foo-1',
-        speedOut: 0,
-        speedIn: 0,
-      },
-      overlay: {
-        active: false
+      setTimeout(() => {
+        expect(document.querySelectorAll('.custombox-content').length).toEqual(2);
+        done();
+      }, 200);
+    });
+
+    it('should close all modals', (done) => {
+      for (let i = 1; i < 3; i++) {
+        new (Custombox as any).modal({
+          content: {
+            effect: 'fadein',
+            target: `#foo-${i}`,
+          },
+          overlay: {
+            active: false
+          }
+        }).open();
       }
-    }).open();
 
-    setTimeout(() => {
-      expect(hasElement('.custombox-open')).toBe(true);
-      expect(hasElement('.custombox-close')).toBe(false);
+      setTimeout(() => {
+        expect(document.querySelectorAll('.custombox-close').length).toEqual(0);
+        Custombox.modal.closeAll();
+        expect(document.querySelectorAll('.custombox-close').length).toEqual(2);
+        done();
+      }, 200);
+    });
+
+    it('should close a modal with a click', (done) => {
+      new (Custombox as any).modal({
+        content: {
+          effect: 'fadein',
+          target: '#foo-1',
+        },
+        overlay: {
+          active: false
+        }
+      }).open();
 
-      Custombox.modal.close();
+      setTimeout(() => {
+        const event: Event = new Event('click');
+        document.querySelector('.custombox-content').dispatchEvent(event);
 
-      expect(hasElement('.custombox-open')).toBe(false);
-      expect(hasElement('.custombox-close')).toBe(true);
-      done();
-    }, 200);
+        expect(hasElement('.custombox-close')).toBe(true);
+        done();
+      }, 200);
+    });
   });
 
-  it('should have closed by ID', (done) => {
-    const ID: string = 'my-custom-id';
-
-    new (Custombox as any).modal({
-      content: {
-        effect: 'fall',
-        target: '#foo-1',
-        id: ID
-      },
-      overlay: {
-        active: false
+  describe('Overlay', () => {
+    let originalTimeout;
+    beforeEach(() => {
+      originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
+      jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+    });
+
+    beforeEach(() => {
+      for (let i = 1; i < 3; i++) {
+        let div = document.createElement('div');
+        div.innerHTML = `Lorem ipmsum (${i}) ...`;
+        div.setAttribute('id', `foo-${i}`);
+        document.body.appendChild(div);
       }
-    }).open();
-
-    setTimeout(() => {
-      expect(hasElement(`#custombox-${ID}`)).toBe(true);
-      Custombox.modal.close(ID);
-      expect(hasElement('.custombox-close')).toBe(true);
-      done();
-    }, 200);
-  });
+    });
+
+    afterEach(()=> {
+      for (let i = 1; i < 3; i++) {
+        let elem = document.getElementById(`foo-${i}`);
+        elem.parentNode.removeChild(elem);
+      }
+
+      // custombox-content
+      let contents = document.querySelectorAll('.custombox-content');
+      for (let i = 0, t = contents.length; i < t; i++) {
+        contents[i].parentNode.removeChild(contents[i]);
+      }
+
+      // custombox-overlay
+      let overlays = document.querySelectorAll('.custombox-overlay');
+      for (let i = 0, t = overlays.length; i < t; i++) {
+        overlays[i].parentNode.removeChild(overlays[i]);
+      }
+
+      delete Custombox;
+
+      jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
+    });
 
-  it('should have open two consecutive modals', (done) => {
-    for (let i = 1; i < 3; i++) {
+    it('should have put overlay color', (done) => {
       new (Custombox as any).modal({
         content: {
           effect: 'fadein',
-          target: `#foo-${i}`,
+          target: '#foo-1',
         },
+        overlay: {
+          color: '#F00',
+        }
       }).open();
-    }
 
-    setTimeout(() => {
-      expect(document.querySelectorAll('.custombox-content').length).toEqual(2);
-      done();
-    }, 200);
-  });
+      setTimeout(() => {
+        expect(hasElement('.custombox-overlay')).toBe(true);
+
+        let overlay: any = document.querySelector('.custombox-overlay');
+        expect(overlay.style.backgroundColor).toEqual('rgb(255, 0, 0)');
+        done();
+      }, 200);
+    });
 
-  it('should close all modals', (done) => {
-    for (let i = 1; i < 3; i++) {
+    it('should have put overlay opacity', (done) => {
       new (Custombox as any).modal({
         content: {
           effect: 'fadein',
-          target: `#foo-${i}`,
+          target: '#foo-1',
         },
         overlay: {
-          active: false
+          opacity: 1,
         }
       }).open();
-    }
-
-    setTimeout(() => {
-      expect(document.querySelectorAll('.custombox-close').length).toEqual(0);
-      Custombox.modal.closeAll();
-      expect(document.querySelectorAll('.custombox-close').length).toEqual(2);
-      done();
-    }, 200);
-  });
 
-  it('should close a modal with a click', (done) => {
-    new (Custombox as any).modal({
-      content: {
-        effect: 'fadein',
-        target: '#foo-1',
-      },
-      overlay: {
-        active: false
-      }
-    }).open();
+      setTimeout(() => {
+        let overlay: any = document.querySelector('.custombox-overlay');
+        let opacity = window.getComputedStyle(overlay, null).getPropertyValue('opacity');
 
-    setTimeout(() => {
-      const event: Event = new Event('click');
-      document.querySelector('.custombox-content').dispatchEvent(event);
+        opacity = opacity.replace(/,/g, '.');
+        expect(Math.ceil(+opacity)).toEqual(1);
+        done();
+      }, 200);
+    });
 
-      expect(hasElement('.custombox-close')).toBe(true);
-      done();
-    }, 200);
-  });
-});
+    it(`should have prevented don't close`, (done) => {
+      new (Custombox as any).modal({
+        content: {
+          effect: 'fadein',
+          target: '#foo-1',
+        },
+        overlay: {
+          close: false
+        }
+      }).open();
 
-describe('Custombox #options', () => {
-  let originalTimeout;
-  beforeEach(function() {
-    originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
-    jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
-  });
+      setTimeout(() => {
+        const event: Event = new Event('click');
+        document.querySelector('.custombox-overlay').dispatchEvent(event);
 
-  beforeEach(() => {
-    for (let i = 1; i < 3; i++) {
-      let div = document.createElement('div');
-      div.innerHTML = `Lorem ipmsum (${i}) ...`;
-      div.setAttribute('id', `foo-${i}`);
-      document.body.appendChild(div);
-    }
-  });
+        expect(hasElement('.custombox-close')).toBe(false);
+        done();
+      }, 200);
+    });
 
-  afterEach(()=> {
-    for (let i = 1; i < 3; i++) {
-      let elem = document.getElementById(`foo-${i}`);
-      elem.parentNode.removeChild(elem);
-    }
+    it('should have close it with esc key', (done) => {
+      new (Custombox as any).modal({
+        content: {
+          effect: 'fadein',
+          target: '#foo-1',
+        }
+      }).open();
 
-    // custombox-content
-    let contents = document.querySelectorAll('.custombox-content');
-    for (let i = 0, t = contents.length; i < t; i++) {
-      contents[i].parentNode.removeChild(contents[i]);
-    }
+      setTimeout(() => {
+        let event: any = new Event('keydown');
+        event.which = event.keyCode = 27;
+        document.dispatchEvent(event);
 
-    // custombox-overlay
-    let overlays = document.querySelectorAll('.custombox-overlay');
-    for (let i = 0, t = overlays.length; i < t; i++) {
-      overlays[i].parentNode.removeChild(overlays[i]);
-    }
+        expect(hasElement('.custombox-close')).toBe(true);
+        done();
+      }, 200);
+    });
 
-    delete Custombox;
+    it('should have not close it with esc key', (done) => {
+      new (Custombox as any).modal({
+        content: {
+          effect: 'fadein',
+          target: '#foo-1',
+        },
+        overlay: {
+          escKey: false
+        }
+      }).open();
 
-    jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
-  });
+      setTimeout(() => {
+        let event: any = new Event('keydown');
+        event.which = event.keyCode = 27;
+        document.dispatchEvent(event);
 
-  it('should have put overlay color', (done) => {
-    new (Custombox as any).modal({
-      content: {
-        effect: 'fadein',
-        target: '#foo-1',
-      },
-      overlay: {
-        color: '#F00',
-      }
-    }).open();
+        expect(hasElement('.custombox-close')).toBe(false);
+        done();
+      }, 200);
+    });
 
-    setTimeout(() => {
-      expect(hasElement('.custombox-overlay')).toBe(true);
+    it('should have run the onOpen function', (done) => {
+      let state: boolean = false;
+      new (Custombox as any).modal({
+        content: {
+          effect: 'fadein',
+          target: '#foo-1',
+        },
+        overlay: {
+          onOpen: () => state = true
+        }
+      }).open();
 
-      let overlay: any = document.querySelector('.custombox-overlay');
-      expect(overlay.style.backgroundColor).toEqual('rgb(255, 0, 0)');
-      done();
-    }, 200);
-  });
+      setTimeout(() => {
+        expect(state).toBe(true);
+        done();
+      }, 200);
+    });
 
-  it('should have put overlay opacity', (done) => {
-    new (Custombox as any).modal({
-      content: {
-        effect: 'fadein',
-        target: '#foo-1',
-      },
-      overlay: {
-        opacity: 1,
-      }
-    }).open();
+    it('should have run the onComplete function', (done) => {
+      let state: boolean = false;
+      new (Custombox as any).modal({
+        content: {
+          effect: 'fadein',
+          target: '#foo-1',
+        },
+        overlay: {
+          onComplete: () => state = true
+        }
+      }).open();
 
-    setTimeout(() => {
-      let overlay: any = document.querySelector('.custombox-overlay');
-      let opacity = window.getComputedStyle(overlay, null).getPropertyValue('opacity');
+      setTimeout(() => {
+        expect(state).toBe(true);
+        done();
+      }, 500);
+    });
 
-      opacity = opacity.replace(/,/g, '.');
-      expect(Math.ceil(+opacity)).toEqual(1);
-      done();
-    }, 200);
-  });
+    it('should have run the onClose function', (done) => {
+      let state: boolean = false;
+      new (Custombox as any).modal({
+        content: {
+          effect: 'fadein',
+          target: '#foo-1',
+        },
+        overlay: {
+          onClose: () => state = true
+        }
+      }).open();
 
-  it(`should have prevented don't close`, (done) => {
-    new (Custombox as any).modal({
-      content: {
-        effect: 'fadein',
-        target: '#foo-1',
-      },
-      overlay: {
-        close: false
-      }
-    }).open();
+      setTimeout(() => {
+        Custombox.modal.close();
+      }, 500);
 
-    setTimeout(() => {
-      const event: Event = new Event('click');
-      document.querySelector('.custombox-overlay').dispatchEvent(event);
+      setTimeout(() => {
+        expect(state).toBe(true);
+        done();
+      }, 1000);
+    });
 
-      expect(hasElement('.custombox-close')).toBe(false);
-      done();
-    }, 200);
+    it('should have opened without overlay', (done) => {
+      new (Custombox as any).modal({
+        content: {
+          effect: 'fadein',
+          target: '#foo-1',
+        },
+        overlay: {
+          active: false
+        }
+      }).open();
+
+      setTimeout(() => {
+        expect(hasElement('.custombox-overlay')).toBe(false);
+        done();
+      }, 200);
+    });
   });
 
-  it('should have close it with esc key', (done) => {
-    new (Custombox as any).modal({
-      content: {
-        effect: 'fadein',
-        target: '#foo-1',
+  describe('Content', () => {
+    let originalTimeout;
+    beforeEach(() => {
+      originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
+      jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+    });
+
+    beforeEach(() => {
+      for (let i = 1; i < 3; i++) {
+        let div = document.createElement('div');
+        div.innerHTML = `Lorem ipmsum (${i}) ...`;
+        div.setAttribute('id', `foo-${i}`);
+        document.body.appendChild(div);
       }
-    }).open();
+    });
 
-    setTimeout(() => {
-      let event: any = new Event('keydown');
-      event.which = event.keyCode = 27;
-      document.dispatchEvent(event);
+    beforeEach(() => {
+      (jasmine as any).Ajax.install();
+    });
 
-      expect(hasElement('.custombox-close')).toBe(true);
-      done();
-    }, 200);
-  });
+    afterEach(()=> {
+      for (let i = 1; i < 3; i++) {
+        let elem = document.getElementById(`foo-${i}`);
+        elem.parentNode.removeChild(elem);
+      }
 
-  it('should have not close it with esc key', (done) => {
-    new (Custombox as any).modal({
-      content: {
-        effect: 'fadein',
-        target: '#foo-1',
-      },
-      overlay: {
-        escKey: false
+      // custombox-content
+      let contents = document.querySelectorAll('.custombox-content');
+      for (let i = 0, t = contents.length; i < t; i++) {
+        contents[i].parentNode.removeChild(contents[i]);
       }
-    }).open();
 
-    setTimeout(() => {
-      let event: any = new Event('keydown');
-      event.which = event.keyCode = 27;
-      document.dispatchEvent(event);
+      // custombox-overlay
+      let overlays = document.querySelectorAll('.custombox-overlay');
+      for (let i = 0, t = overlays.length; i < t; i++) {
+        overlays[i].parentNode.removeChild(overlays[i]);
+      }
 
-      expect(hasElement('.custombox-close')).toBe(false);
-      done();
-    }, 200);
-  });
+      delete Custombox;
 
-  it('should have run the onOpen function', (done) => {
-    let state: boolean = false;
-    new (Custombox as any).modal({
-      content: {
-        effect: 'fadein',
-        target: '#foo-1',
-      },
-      overlay: {
-        onOpen: function () {
-          state = true;
-        }
-      }
-    }).open();
+      jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
 
-    setTimeout(() => {
-      expect(state).toBe(true);
-      done();
-    }, 200);
-  });
+      (jasmine as any).Ajax.uninstall();
+    });
 
-  it('should have run the onComplete function', (done) => {
-    let state: boolean = false;
-    new (Custombox as any).modal({
-      content: {
-        effect: 'fadein',
-        target: '#foo-1',
-      },
-      overlay: {
-        onComplete: function () {
-          state = true;
-        }
-      }
-    }).open();
+    it('should have put content ID', (done) => {
+      const ID: string = 'my-custom-id';
 
-    setTimeout(() => {
-      expect(state).toBe(true);
-      done();
-    }, 500);
-  });
+      new (Custombox as any).modal({
+        content: {
+          effect: 'fadein',
+          target: '#foo-1',
+          id: ID
+        },
+      }).open();
+
+      setTimeout(() => {
+        expect(hasElement(`#custombox-${ID}`)).toBe(true);
+        done();
+      }, 200);
+    });
+
+    it('should have open from AJAX', (done) => {
+      new (Custombox as any).modal({
+        content: {
+          effect: 'fadein',
+          target: 'foo.html',
+        },
+      }).open();
+
+      setTimeout(() => {
+        (jasmine as any).Ajax.requests.mostRecent().respondWith({
+          status: 200,
+          contentType: 'text/html',
+          responseText: 'awesome content'
+        });
+
+        setTimeout(() => {
+          expect(hasElement('.custombox-content')).toBe(true);
+
+          let text = document.querySelector('.custombox-content').textContent;
+          expect(text).toEqual('awesome content');
+          done();
+        }, 400);
+      }, 200);
+    });
+
+    it('should have animateFrom', (done) => {
+      new (Custombox as any).modal({
+        content: {
+          effect: 'slide',
+          target: '#foo-1',
+          animateFrom: 'left',
+        },
+      }).open();
+
+      setTimeout(() => {
+        expect(hasElement('.custombox-left')).toBe(true);
+        done();
+      }, 200);
+    });
+
+    it('should have animate animateTo', (done) => {
+      new (Custombox as any).modal({
+        content: {
+          effect: 'slide',
+          target: '#foo-1',
+          animateTo: 'right'
+        },
+      }).open();
+
+      setTimeout(() => {
+        Custombox.modal.close();
+        expect(hasElement('.custombox-right')).toBe(true);
+        done();
+      }, 200);
+    });
+
+    it('should have put width', (done) => {
+      new (Custombox as any).modal({
+        content: {
+          effect: 'slide',
+          target: '#foo-1',
+          width: '600px',
+        },
+      }).open();
+
+      setTimeout(() => {
+        let content = document.querySelector('.custombox-content > div');
+        expect(content.clientWidth).toEqual(600);
+        done();
+      }, 200);
+    });
+
+    it('should have positionX and positionY', (done) => {
+      new (Custombox as any).modal({
+        content: {
+          effect: 'slide',
+          target: '#foo-1',
+          positionY: 'center',
+          positionX: 'top'
+        },
+      }).open();
+
+      setTimeout(() => {
+        expect(hasElement('.custombox-y-center')).toBe(true);
+        expect(hasElement('.custombox-x-top')).toBe(true);
+        done();
+      }, 200);
+    });
+
+    it('should have fullscreen', (done) => {
+      new (Custombox as any).modal({
+        content: {
+          effect: 'slide',
+          target: '#foo-1',
+          fullscreen: true,
+        },
+      }).open();
+
+      setTimeout(() => {
+        let fullscreen = document.querySelector('.custombox-content');
+
+        expect(hasElement('.custombox-fullscreen')).toBe(true);
+        expect(fullscreen.clientWidth).toEqual(window.innerWidth - 16);
+        expect(fullscreen.clientHeight).toEqual(window.innerHeight);
+        done();
+      }, 200);
+    });
 
-  it('should have run the onClose function', (done) => {
-    let state: boolean = false;
-    new (Custombox as any).modal({
-      content: {
-        effect: 'fadein',
-        target: '#foo-1',
-      },
-      overlay: {
-        onClose: function () {
-          state = true;
+    it('should have run the onOpen function', (done) => {
+      let state: boolean = false;
+      new (Custombox as any).modal({
+        content: {
+          effect: 'fadein',
+          target: '#foo-1',
+          onOpen: () => state = true
+        },
+      }).open();
+
+      setTimeout(() => {
+        expect(state).toBe(true);
+        done();
+      }, 200);
+    });
+
+    it('should have run the onComplete function', (done) => {
+      let state: boolean = false;
+      new (Custombox as any).modal({
+        content: {
+          effect: 'fadein',
+          target: '#foo-1',
+          onComplete: () => state = true
+        },
+        overlay: {
+          active: false
         }
-      }
-    }).open();
+      }).open();
 
-    setTimeout(() => {
-      Custombox.modal.close();
-    }, 500);
+      setTimeout(() => {
+        expect(state).toBe(true);
+        done();
+      }, 500);
+    });
 
-    setTimeout(() => {
-      expect(state).toBe(true);
-      done();
-    }, 1000);
-  });
+    it('should have run the onClose function', (done) => {
+      let state: boolean = false;
+      new (Custombox as any).modal({
+        content: {
+          effect: 'fadein',
+          target: '#foo-1',
+          onClose: () => state = true
+        },
+      }).open();
 
-  it('should have opened without overlay', (done) => {
-    new (Custombox as any).modal({
-      content: {
-        effect: 'fadein',
-        target: '#foo-1',
-      },
-      overlay: {
-        active: false
-      }
-    }).open();
+      setTimeout(() => {
+        Custombox.modal.close();
+      }, 500);
 
-    setTimeout(() => {
-      expect(hasElement('.custombox-overlay')).toBe(false);
-      done();
-    }, 200);
+      setTimeout(() => {
+        expect(state).toBe(true);
+        done();
+      }, 1000);
+    });
   });
 });
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index e9d6d49..2bb9340 100644
--- a/src/index.html
+++ b/src/index.html
@@ -58,9 +58,13 @@
           content: {
             id: 'foo',
             fullscreen: true,
-            effect: 'fadein',
+            effect: 'slidea',
             target: 'ajax.html',
           },
+          overlay: {
+            color: '#F00',
+            opacity: 0.2
+          }
         }).open();
       });
 
@@ -76,11 +80,11 @@
       }
 
       function closea() {
-        Custombox.action.close('foo');
+        Custombox.modal.close('foo');
       }
 
       function closeAll() {
-        Custombox.action.closeAll();
+        Custombox.modal.closeAll();
       }
     </script>
 </body>