这个模态窗口插件使用原生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 弹层的更多相关文章

  1. Bootstrap~大叔封装的弹层

    回到目录 对于Bootstrap的弹层,插件有很多,今天主要用的是它自带的功能,通过bootstrap提供的模式窗口来实现的,而大叔主要对使用方法进行了封装,开发人员可以自己动态传入弹层的HTML内容 ...

  2. Bootstrap模态弹出框

    前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...

  3. 利用UiWatchers 监听解决安卓自动化各种自动化各种非期待弹窗,弹层,升级,广告,对话框,来电等问题

    app自动化时,各种不期待的弹层弹窗,升级广告等时有飞出,由于弹窗具有不定时,不定页面等很多不确定性.有的弹窗很不友好,不×掉,很难进行下一步操作,造成 测试用例失败.而判断是否有弹窗,弹层很麻烦.研 ...

  4. 基于layer简单的弹层封装

    /** * 产生长度为32的Guid字符串 */ function getGuid32() { var rt_str = String.fromCharCode(65 + Math.floor(Mat ...

  5. Appium UiWatchers 监听解决各种非期待弹窗,弹层,弹弹弹等问题

    app自动化时,各种不期待的弹层弹窗,升级广告等时有飞出,由于弹窗具有不定时,不定页面等很多不确定性.有的弹窗很不友好,不×掉,很难进行下一步操作,造成 测试用例失败.而判断是否有弹窗,弹层很麻烦.研 ...

  6. 弹层组件-layer

    layer是Layui的一个弹层组建,功能强大,总之我很喜欢,下面介绍这个组件的基本用法. 首先如果只需要使用layer而不想使用Layui可以单独下载layer组件包,页面引入jquery1.8以上 ...

  7. alert弹层无法取消问题解决办法

    最近做H5移动端开发的时候,js代码写了个alert,在Android手机上能正常运行,但是在IOS上运行弹出之后却无法取消掉, 而且页面卡死,点不了任何东西,这种情况是非常不好的,用户体验非常糟糕. ...

  8. Bootstrap模态弹出窗

    Bootstrap模态弹出窗有三种方式: 1.href触发模态弹出窗元素: <a class="btn btn-primary" data-toggle="moda ...

  9. 弹层,iframe页面

    前台页面: <img src="chb/老玩家 好礼送.jpg" border="0" width="202" height=&quo ...

随机推荐

  1. yii2 高级版新建一个应用(api应用为例子)

    先在项目的根目录下复制一份 backend 为 api: cp backend/ api -r 拷贝 api 环境 cp -a environments/dev/frontend environmen ...

  2. java编程内容之开始

    java应用程序开发应该掌握的各方面技术 1.初识java,熟悉Eclipse开发工具 2.java语言基础 3.流程控制,数组,字符串,类与对象 4.接口,继承与多态,类的高级特性 5.Java集合 ...

  3. # WinForm关闭窗体确认

    private void Lba_IE_Form_FormClosing(object sender, FormClosingEventArgs e) { if (MessageBox.Show(&q ...

  4. Redis集群学习笔记

    Redis集群学习笔记 前言 最近有个需求,就是将一个Redis集群中数据转移到某个单机Redis上. 迁移Redis数据的话,如果是单机Redis,有两种方式: a. 执行redis-cli shu ...

  5. ajax专题

    什么是ajax?他可以用来做什么? 1.首先,ajax不是一种编程语言,是一种在无需重新加载整个网页的情况下能够更新部分网页的技术. 优点:通过和后台服务器进行少量的数据交换,网页就能异步的局部跟新, ...

  6. 原始的生成对抗网络GAN

    论文地址:https://arxiv.org/pdf/1406.2661.pdf 1.简介: GAN的两个模型 判别模型:就是图中右半部分的网络,直观来看就是一个简单的神经网络结构,输入就是一副图像, ...

  7. 启动tomcat一闪而过问题调试并解决

    之前一直用myelise+tomcat启动项目很正常,今天在尝试用绿色版tomcat8时,点击startup.bat文件时,一闪而过,tomcat未正常启动,也无法看到错误信息.搜索网络查找到调试方法 ...

  8. 如何查看DNS?

    查看dns服务ip:    命令: ipconfig/all  查看dns缓存:    命令:ipconfig/displaydns     强制更新缓存:    命令:ipconfig /flush ...

  9. [Java学习] java泛型通配符和类型参数的范围

    本节先讲解如何限制类型参数的范围,再讲解通配符(?). 类型参数的范围 在泛型中,如果不对类型参数加以限制,它就可以接受任意的数据类型,只要它是被定义过的.但是,很多时候我们只需要一部分数据类型就够了 ...

  10. 关于pthread_cond_wait()使用的理解

    pthread_cond_wait()是linux多线程同步实现的一种方法,表示等待某一个线程共享变量满足了某种情况时 线程才能继续执行 pthread_cond_wait()之后的代码,如下面的示例 ...