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 ...
随机推荐
- yii2 高级版新建一个应用(api应用为例子)
先在项目的根目录下复制一份 backend 为 api: cp backend/ api -r 拷贝 api 环境 cp -a environments/dev/frontend environmen ...
- java编程内容之开始
java应用程序开发应该掌握的各方面技术 1.初识java,熟悉Eclipse开发工具 2.java语言基础 3.流程控制,数组,字符串,类与对象 4.接口,继承与多态,类的高级特性 5.Java集合 ...
- # WinForm关闭窗体确认
private void Lba_IE_Form_FormClosing(object sender, FormClosingEventArgs e) { if (MessageBox.Show(&q ...
- Redis集群学习笔记
Redis集群学习笔记 前言 最近有个需求,就是将一个Redis集群中数据转移到某个单机Redis上. 迁移Redis数据的话,如果是单机Redis,有两种方式: a. 执行redis-cli shu ...
- ajax专题
什么是ajax?他可以用来做什么? 1.首先,ajax不是一种编程语言,是一种在无需重新加载整个网页的情况下能够更新部分网页的技术. 优点:通过和后台服务器进行少量的数据交换,网页就能异步的局部跟新, ...
- 原始的生成对抗网络GAN
论文地址:https://arxiv.org/pdf/1406.2661.pdf 1.简介: GAN的两个模型 判别模型:就是图中右半部分的网络,直观来看就是一个简单的神经网络结构,输入就是一副图像, ...
- 启动tomcat一闪而过问题调试并解决
之前一直用myelise+tomcat启动项目很正常,今天在尝试用绿色版tomcat8时,点击startup.bat文件时,一闪而过,tomcat未正常启动,也无法看到错误信息.搜索网络查找到调试方法 ...
- 如何查看DNS?
查看dns服务ip: 命令: ipconfig/all 查看dns缓存: 命令:ipconfig/displaydns 强制更新缓存: 命令:ipconfig /flush ...
- [Java学习] java泛型通配符和类型参数的范围
本节先讲解如何限制类型参数的范围,再讲解通配符(?). 类型参数的范围 在泛型中,如果不对类型参数加以限制,它就可以接受任意的数据类型,只要它是被定义过的.但是,很多时候我们只需要一部分数据类型就够了 ...
- 关于pthread_cond_wait()使用的理解
pthread_cond_wait()是linux多线程同步实现的一种方法,表示等待某一个线程共享变量满足了某种情况时 线程才能继续执行 pthread_cond_wait()之后的代码,如下面的示例 ...