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 ...
随机推荐
- Linux的内存分页管理【转】
内存是计算机的主存储器.内存为进程开辟出进程空间,让进程在其中保存数据.我将从内存的物理特性出发,深入到内存管理的细节,特别是了解虚拟内存和内存分页的概念. 内存 简单地说,内存就是一个数据货架.内存 ...
- Jmeter 处理Unicode编码转为中文
对于接口中返回报文,有的接口返回信息是Unicode编码,写断言的时候,要么就Response Assertion就写成Unicode编码的断言,如下图: 真心不觉得返回报文加密能有多安全,别人将报文 ...
- django不返回QuerySets的API
以下的方法不会返回QuerySets,但是作用非常强大,尤其是粗体显示的方法,需要背下来. 方法名 解释 get() 获取单个对象 create() 创建对象,无需save() get_or_crea ...
- Spring AMQP 源码分析 06 - 手动消息确认
### 准备 ## 目标 了解 Spring AMQP 如何手动确认消息已成功消费 ## 前置知识 <Spring AMQP 源码分析 04 - MessageListener> ## 相 ...
- resin中关于url rewrite来传递jsessionid的问题
最近两天在项目中碰到,一个很奇怪的问题.同一个账号多次切换登录时,会出现这个账号的信息在session中找不到,虽然可以登录成功,但是之后这个用户信息好像没有保存到session中一样,或者是被改变了 ...
- 词向量-LRWE模型-更好地识别反义词同义词
上一节,我们介绍利用文本和知识库融合训练词向量的方法,如何更好的融合这些结构化知识呢?使得训练得到的词向量更具有泛化能力,能有效识别同义词反义词,又能学习到上下文信息还有不同级别的语义信息. 基于上述 ...
- 重构 MVC; 代码分享工具(重构,改进,打分)
include 模块和 extend 模块的不同: Class Extension: 通过向singleton class中加入Module来定义class method,是对象扩展的一个特例. ...
- homestead 暴露接口到外网
laravel 官方推荐的运行环境是homestead,但homestead是个虚拟机,你自己访问没问题,给别人联调怎么办? 一个大型项目肯定不止一个人开发,这个时候就需要将你虚拟机上的接口暴露给外网 ...
- Hibernate中的HQL的基本常用小例子,单表查询与多表查询
<span style="font-size:24px;color:#3366ff;">本文章实现HQL的以下功能:</span> /** * hql语法: ...
- Erlang:Error in process ... with exit value
=ERROR REPORT==== 10-Apr-2015::16:30:04 ===Error in process <0.218.0> with exit value: {badarg ...