fancyBox高级进阶用法

　　最近给客户做的一个项目中，客户要求弹窗的边界与页面某个区块边界平齐，但平齐之后，弹出的窗口就不是居中的情况了，研究之后，认为需要改写fancyBox的fancybox-wrap类中的top属性才能达到目标，这就需要我来自定义fancybox的样式了，在自定义的过程中遇到了了以下几个问题：

1. 设置宽高不起作用
2. 我的弹窗内的代码是用js写上去的，如何才能设置宽高呢
3. 如何设置自定义的样式
4. 设置了自定义样式之后又被fancybox内置的样式覆盖了

以上问题的解决办法：

问题1、先设置autoSize:false，然后再设置width和height，这样自定义的width和height就有效果了

 $.fancybox({

 　　autoSize:false,

 　　width:500,

 　　height:200

 });

问题2、fancybox的content属性可以用来接收html代码以显示出来，不知道这个属性之前，我的代码是这样写的：

 $.fancybox("<div>这是测试代码</div>");

当时，都不知道width和height属性应该写在哪，现在好了，有了content属性，width和height当然有放置他们的地方了。

 var html="<div>这是测试代码</div>";
 $.fancybox({
     width:500,
     height:300,
     content:html
 });

问题3、利用fancybox的wrapCSS属性来设置自定义样式

 $.fancybox({
     wrapCSS:"fancybox-custom"
 });

这样写了之后，就会向fancybox-wrap这个div增加一个类名为“fancybox-custom”的class，这样，通过自定义的这个class可以对fancybox的外观进行自定义

问题4、解决这个问题，需要用到!important，即：

 .fancybox-custom{
     top:200px !important;
 }

这样，fancybox-wrap这个div上内置的样式代码就会被覆盖掉了，而且不用修改fancybox的代码。

好了，我的问题全部解决了。