Bootstrap CustomBox 弹层
这个模态窗口插件使用原生javascript制作,它也可以和jQuery完美的结合。
请注意:这些模态窗口动画仅仅工作在支持各自CSS3属性的浏览器上。Internet Explorer 8 和 9需要legacy.min.js的支持,但是没有动画效果。

在线实例
使用方法
<script>
$(function () {
$('#element').on('click', function ( e ) {
Custombox.open({
target: '#modal',
effect: 'fadein'
});
e.preventDefault();
});
});
</script>
参数详解
| Name | Type | Property | Description |
|---|---|---|---|
| target | string | null | Set the URL, ID or Class. |
| id | string | number | null | Set the ID for the modal. |
| cache | boolean | false | If set to false, it will force requested pages not to be cached by the browser only when send by AJAX. |
| escKey | boolean | true | Allows the user to close the modal when press escape key. |
| zIndex | string | number | auto | Overlay z-index: Auto or number. |
| overlay | boolean | true | Show the overlay. |
| overlayColor | string | #000 | Overlay color. |
| overlayOpacity | number | 0.8 | The overlay opacity level. Range: 0 to 1. |
| overlayClose | boolean | true | Allows the user to close the modal by clicking the overlay. |
| overlaySpeed | number | 300 | Sets the speed of the overlay, in milliseconds. |
| overlayEffect | string | auto | Combine any of the effects. |
| width | number | null | null | Set a fixed total width. |
| effect | string | fadein | fadein | slide | newspaper | fall | sidefall | blur | flip | sign | superscaled | slit | rotate | letmein | makeway | slip | corner | slidetogether | scale | door | push | contentscale. |
| position | string | center, center | Set position of modal. First position 'x': left, center and right. Second position 'y': top, center, bottom. |
| animation | string | null | null | Only with effects: slide or rotate (top, right, bottom, left and center) and flip (vertical or horizontal). Output position separated by commas. |
| speed | number | 600 | Sets the speed of the transitions, in milliseconds. |
Bootstrap CustomBox 弹层的更多相关文章
- Bootstrap~大叔封装的弹层
回到目录 对于Bootstrap的弹层,插件有很多,今天主要用的是它自带的功能,通过bootstrap提供的模式窗口来实现的,而大叔主要对使用方法进行了封装,开发人员可以自己动态传入弹层的HTML内容 ...
- Bootstrap模态弹出框
前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...
- 利用UiWatchers 监听解决安卓自动化各种自动化各种非期待弹窗,弹层,升级,广告,对话框,来电等问题
app自动化时,各种不期待的弹层弹窗,升级广告等时有飞出,由于弹窗具有不定时,不定页面等很多不确定性.有的弹窗很不友好,不×掉,很难进行下一步操作,造成 测试用例失败.而判断是否有弹窗,弹层很麻烦.研 ...
- 基于layer简单的弹层封装
/** * 产生长度为32的Guid字符串 */ function getGuid32() { var rt_str = String.fromCharCode(65 + Math.floor(Mat ...
- Appium UiWatchers 监听解决各种非期待弹窗,弹层,弹弹弹等问题
app自动化时,各种不期待的弹层弹窗,升级广告等时有飞出,由于弹窗具有不定时,不定页面等很多不确定性.有的弹窗很不友好,不×掉,很难进行下一步操作,造成 测试用例失败.而判断是否有弹窗,弹层很麻烦.研 ...
- 弹层组件-layer
layer是Layui的一个弹层组建,功能强大,总之我很喜欢,下面介绍这个组件的基本用法. 首先如果只需要使用layer而不想使用Layui可以单独下载layer组件包,页面引入jquery1.8以上 ...
- alert弹层无法取消问题解决办法
最近做H5移动端开发的时候,js代码写了个alert,在Android手机上能正常运行,但是在IOS上运行弹出之后却无法取消掉, 而且页面卡死,点不了任何东西,这种情况是非常不好的,用户体验非常糟糕. ...
- Bootstrap模态弹出窗
Bootstrap模态弹出窗有三种方式: 1.href触发模态弹出窗元素: <a class="btn btn-primary" data-toggle="moda ...
- 弹层,iframe页面
前台页面: <img src="chb/老玩家 好礼送.jpg" border="0" width="202" height=&quo ...
随机推荐
- LA 3135 阿格斯(优先队列)
https://vjudge.net/problem/UVALive-3135 题意: 你的任务是编写一个称为Argus的系统.该系统支持一个Register的命令 Register Q_num Pe ...
- NYOJ 16 矩形嵌套(经典DP)
http://acm.nyist.net/JudgeOnline/problem.php?pid=16 矩形嵌套 时间限制:3000 ms | 内存限制:65535 KB 难度: ...
- node 文件、文件夹 增删改查
1. 文件夹 增加文件夹 var fs = require("fs"); console.log("创建目录 tmp"); fs.mkdir("tmp ...
- android开发:Android 中自定义View的应用
大家好我们今天的教程是在Android 教程中自定义View 的学习,对于初学着来说,他们习惯了Android 传统的页面布局方式,如下代码: <?xml version="1.0&q ...
- MINA2.0用户手册中文版
MINA2.0用户手册中文版--第一章 MINA2.0入门 MINA2.0用户手册中文版--第二章 第一节 MINA应用程序架构 MINA2.0用户手册中文版--第二章 第二节 TCP服务端实例 MI ...
- URAL 1635 Mnemonics and Palindromes
URAL 1635 思路:区间dp+贪心,先n^2处理出每段区间是否是回文串,然后贪心地找每一段1到i的最少分割. 代码: #include<bits/stdc++.h> using na ...
- English trip -- VC(情景课)2 C Where's my pencli?
Grammar focus 语法点: in 和 on in the desk 在桌子抽屉里 on the desk 在桌子面上 Practice 练习 Where's my pencil? I ...
- Turbolinks
Turbolinks Turbolinks® makes navigating your web application faster. 功能: 自动优化导航. 无需server端配合.全HTML网页 ...
- Java基础-this关键字和构造方法(10)
this关键字 方法被哪个对象调用,this就代表那个对象当局部变量隐藏成员变量时,使用this关键字(例如构造方法和访问器). 构造方法 构造方法作用概述 给对象的数据进行初始化 构造方法格式 方法 ...
- Blog Post Rating CodeForces - 806E (线段树二分)
题目链接 题目大意: 有一个博客, 初始分数为$0$, 有$n$个人, 第$i$个人有一个期望值$a_i$, 如果第$i$个人浏览博客时,博客赞数高于$a_i$博客分数$-1$, 低于$+1$, 相等 ...