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 ...
随机推荐
- go 异常处理
package main import "fmt" func main() { defer func() { if err := recover(); err != nil { f ...
- Codeforces 260B - Ancient Prophesy
260B - Ancient Prophesy 思路:字符串处理,把符合条件的答案放进map里,用string类中的substr()函数会简单一些,map中的值可以边加边记录答案,可以省略迭代器访问部 ...
- 20170728xlVba简单的匹配
Sub MatchData() Dim i As Long, EndRow As Long, Key As String Dim Rng As Range Dim Dic As Object Set ...
- codeforces 559a//Gerald's Hexagon// Codeforces Round #313(Div. 1)
题意:面积是sqrt(3)/4的多少倍? 做延长线 #pragma comment(linker,"/STACK:1024000000,1024000000") #include& ...
- Confluence 6 从外部目录中同步数据如何工作
下面是有关缓存功能的一些摘要信息: 用户和用户组的缓存信息保存在应用程序的数据库中. 当你连接一个新的外部目录到系统中的时候,一个同步任务将会启动被,并且在后台运行拷贝所有需要的用户和用户组信息,以及 ...
- Android设置全局Context
新建一个java继承Application类 import android.app.Application; import android.content.Context; /** * 编写自定义Ap ...
- MySQL 事件跟踪器
/*第一步 创建以下两个 日志表 */ CREATE TABLE `slow_log` ( `start_time` timestamp NOT NULL DEFAULT CURRENT_TIMEST ...
- JavaScript学习总结(十九)——使用js加载器动态加载外部Javascript文件
今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js 1 var MiniSite=new Object(); 2 /** 3 * 判断浏览器 4 */ 5 M ...
- NRF51822+STM32bootload——typedef void (*Fun) (void) 理解
1.typdef 用法如下所示 typedef unsigned char uint8_t; typedef unsigned short int uint16_t; typedef unsigned ...
- POJ 1753 bfs+位运算
T_T ++运算符和+1不一样.(i+1)%4 忘带小括号了.bfs函数是bool 型,忘记返回false时的情况了.噢....debug快哭了...... DESCRIPTION:求最少的步骤.使得 ...