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 ...
随机推荐
- 【TCP/IP详解 卷一:协议】第9章 IP选路
推荐链接:网络地址与主机地址 9.1 引言 路由选择程序(daemon),通常这是一个用户进程.在大多数的Unix系统中,大多数的路由选择程序都是路由程序和网关程序. 路由表经常被IP访问,但是它被路 ...
- 模拟C#的事件添加和删除
从<C# Via CLR>中的演化的一个小demo,探索事件的添加和删除原理,简单明了: using System; using System.Collections.Generic; u ...
- shell until 循环
until 循环 格式: until condition do command done #输出0-9 #!/bin/bash a=0 until [ ! $a -lt 10 ] do echo ...
- 哈希表-java
import java.util.HashMap; import java.util.Iterator; public class JavaHashMap { public static void m ...
- python 基数排序
def radix_sort(array): bucket, digit = [[]], 0 while len(bucket[0]) != len(array): bucket = [[], [], ...
- vmware 安装ubuntu
点击自定义硬件 即将完毕 下面就是安装啦
- Flutter学习笔记(二)
*.assets 当引用图片的时候,需要在pubspec.yaml的文件中的flutter下添加assets,类似于下面的样子: image.png 这里需要注意的是文件里的assets只要一个缩进即 ...
- Codeforces 894B - Ralph And His Magic Field
894B - Ralph And His Magic Field 思路: 当k为1时,如果n和m奇偶性不同,那么没有答案. 可以证明,在其他情况下有答案,且答案为2^(n-1)*(m-1),因为前n- ...
- react notes
jsx 在JSX中嵌入用户输入是安全的,默认情况下, 在渲染之前, React DOM 会格式化(escapes) JSX中的所有值. 从而保证用户无法注入任何应用之外的代码. 在被渲染之前,所有的数 ...
- NotifyIcon实现托盘程序
NotifyIcon 控件的常用属性属性:Icon类型:System.Drawing.Icon说明:将在系统任务栏中显示的图标.可以在设计时指定,也可在运行时动态指定.属性:Text类型:String ...