fancyBox高级进阶用法
最近给客户做的一个项目中,客户要求弹窗的边界与页面某个区块边界平齐,但平齐之后,弹出的窗口就不是居中的情况了,研究之后,认为需要改写fancyBox的fancybox-wrap类中的top属性才能达到目标,这就需要我来自定义fancybox的样式了,在自定义的过程中遇到了了以下几个问题:
- 设置宽高不起作用
- 我的弹窗内的代码是用js写上去的,如何才能设置宽高呢
- 如何设置自定义的样式
- 设置了自定义样式之后又被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的代码。
好了,我的问题全部解决了。
fancyBox高级进阶用法的更多相关文章
- C#可扩展编程之MEF学习笔记(五):MEF高级进阶
好久没有写博客了,今天抽空继续写MEF系列的文章.有园友提出这种系列的文章要做个目录,看起来方便,所以就抽空做了一个,放到每篇文章的最后. 前面四篇讲了MEF的基础知识,学完了前四篇,MEF中比较常用 ...
- 高级进阶DB2(第2版)——内部结构、高级管理与问题诊断
<高级进阶DB2(第2版)——内部结构.高级管理与问题诊断> 基本信息 作者: 牛新庄 出版社:清华大学出版社 ISBN:9787302323839 上架时间:2013-7-3 出版 ...
- MEF高级进阶
MEF高级进阶 好久没有写博客了,今天抽空继续写MEF系列的文章.有园友提出这种系列的文章要做个目录,看起来方便,所以就抽空做了一个,放到每篇文章的最后. 前面四篇讲了MEF的基础知识,学完了前四 ...
- 高级进阶DB2(第2版)
<高级进阶DB2(第2版)> 基本信息 作者: 牛新庄 出版社:清华大学出版社 ISBN:9787302323839 上架时间:2013-7-3 出版日期:2013 年7月 开本:16开 ...
- 最新Python3.6从入门到高级进阶实战视频教程
点击了解更多Python课程>>> 最新Python3.6从入门到高级进阶实战视频教程 第1篇 Python入门导学 第2篇 Python环境装置 第3篇 了解什么是写代码与Pyth ...
- 潭州学院-JavaVIP的Javascript的高级进阶-KeKe老师
潭州学院-JavaVIP的Javascript的高级进阶-KeKe老师 讲的不错,可以学习 下面是教程的目录截图: 下载地址:http://www.fu83.cn/thread-283-1-1.htm ...
- iOS自动布局进阶用法
本文主要介绍几个我遇到并总结的相对高级的用法(当然啦牛人会觉得这也不算什么). 简单的storyboard中上下左右约束,固定宽高啥的用法在这里就不做赘述了. autolayout自动布局是iOS6以 ...
- 【转】iOS自动布局进阶用法
原文网址:http://www.cnblogs.com/dsxniubility/p/4266581.html 本文主要介绍几个我遇到并总结的相对高级的用法(当然啦牛人会觉得这也不算什么). 简单的s ...
- Django框架学习-Model进阶用法
Model进阶用法 回顾 访问外键 访问多对多关系 更改数据库结构 当处理数据库结构改变时,需要注意到几点: 增加字段 首先在开发环境中: 再到产品环境中: 删除字段 删除多对多字段 删除model ...
随机推荐
- tensorflow placeholder
placeholder 是 Tensorflow 中的占位符,暂时储存变量. Tensorflow 如果想要从外部传入data, 那就需要用到 tf.placeholder(), 然后以这种形式传输数 ...
- TCP三次握手四次挥手原理
转自http://www.cnblogs.com/liuxiaoming/archive/2013/04/27/3047803.html TCP协议三次握手原理: 首先,给张图片,建立TCP三次握手的 ...
- 35.windows提权总结
本文参考自冷逸大佬的博客,源地址在这里:https://lengjibo.github.io/windows%E6%8F%90%E6%9D%83%E6%80%BB%E7%BB%93/ windows提 ...
- VSS配置
http://www.cnblogs.com/FreeDong/articles/2193151.html
- restfull知识点
网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机.平板.桌面电脑.其他专用设备......).因此,必须有一种统一的机制,方便不同的前端设备与后端进行通信.这导致API ...
- 洛谷P3803 【模板】多项式乘法(FFT)
P3803 [模板]多项式乘法(FFT) 题目背景 这是一道FFT模板题 题目描述 给定一个n次多项式F(x),和一个m次多项式G(x). 请求出F(x)和G(x)的卷积. 输入输出格式 输入格式: ...
- vue框架学习笔记1
vue1-2:MVVM M:Model 数据模型,负责数据存储 V:View 视图,负责页面的显示 VM:View Model 负责业务处理,对数据进行加工,之后交给视图 下载地址: <!--中 ...
- Webpack, 现在最流行的模块打包工具.压缩打包
压缩bundle.js 1.把我们项目的代码从es6 -> es5 [babel] 参考:http://babeljs.io/docs/setup/#installation 1.1.安装包 b ...
- jvm 锁Lock
自旋锁 线程想要获得一个对象的锁,如果没有得到,会继承占用CPU尝试获取锁, 线程不进入阻塞状态,仍然在Running 锁消除 public void lockTest() { String aa = ...
- mysql日常使用总结(持续更新中)
记录一些日常的mysql常用的使用, 方便随用随查. 一.表结构 1.1 查看表结构 方式1: 可以查看建表语句,完整的表结构. show create table table_name; 方式2:可 ...