colorbox弹出层插件使用方法及注意事项

在web前端项目的开发中，少不了需要使用弹出的对话框，比如提示用户下载APP、提示上传图片成功等。而colorbox这个插件就是一个很不错的对话框插件，在网上搜索时，大家也都是主要推荐这个插件。

下面介绍这个插件的使用方法。

首先当然是引入插件的css、js文件。

<link rel="stylesheet" type="text/css" href="../css/colorbox.css?rev=a0a94e33b8c34190c3539d6b7076f118">
<script src="../js/jquery.colorbox.min.js?rev=f2e30ffc0b33ffea594c9a47824e3838"></script>

然后在需要弹出对话框的html文件中添加如下代码：

<!--提示下载APP对话框--><div id="download-app-colorbox-container"><div id="download-APP-colorbox"><p class="colorbox-tip">提示信息</p><div class="line"></div><div id="voteResultTxt"><a href="http://www.v2gogo.com/down.html">点击下载微兔GOGO APP</a></div></div></div>

CSS代码如下：

#download-app-colorbox-container {display: none;
}

js代码如下：

// 提示下载APP对话框
function showDownloadAPPColorbox(){$.colorbox({reposition: false,      // ?//top: "20px",width: "80%",height: "auto",inline: true,href: "#download-APP-colorbox"});
}

一般来讲，对话框在初始情况下，默认都会隐藏，然后在需要的时候弹出，因此，在上面的CSS代码中，对话框的父级元素download-app-colorbox-container默认是隐藏的。在js代码中，如果需要弹出对话框，直接调用函数showDownloadAPPColorbox()即可。

需要注意的是，如果在CSS中设置download-app-colorbox为默认隐藏，最终调用的对话框将不正常，应该设置其父元素，即download-app-colorbox-container。对话框才能正确显示。

正常弹出的对话框如下图所示：

colorbox弹出层插件使用方法及注意事项相关推荐

Jquery弹出层插件ThickBox的使用方法
这篇文章主要介绍了Jquery弹出层插件ThickBox的使用方法,需要的朋友可以参考下 thickbox是jQuery的一个插件,其作用是弹出对话框.网页框,使用户体验度更加愉悦,下面就来简单介绍它 ...
jbox弹窗_强大的jquery弹出层插件jBox
jBox是一款功能强大的jquery弹出层插件.jBox插件可以用来创建tooltips提示框.模态窗口.图片画廊等多种效果. 使用方法在页面中引入jBox.all.min.css.jquery和j ...
html 弹出层插件,jQuery弹出层插件(原创)
插件描述:简约的jQuery弹出层插件更新时间:2020-01-17 23:37:28 更新说明:版本v4.3.0 1.修复最大化可拖动.改变大小的问题 2.去除对于图片的依赖 3.更新拖动插件 4 ...
Bootstrap3 弹出提示插件的方法
弹出提示插件的方法 1..popover (options) 使用一个可选的对象参数 options调用某个页面元素的弹出提示.如: $('#element').popover ({ placem ...
layer——极简的jquery弹出层插件
官网:http://layer.layui.com/ 作者:贤心 jquery layer是layUI库的成员,一直致力于为web开发提供动力. jquery layer弹出层插件支持单击弹出,自动 ...
jquery 弹出层插件
最近在研究弹出层插件时发现网上很多插件功能很强大,同时插件也很庞大.在这里个人写了一个比较秀珍的弹出层插件. jquery.popdialog.js $(function () {$.fn.PopDi ...
layer弹出层闪退_jQuery使用Layer弹出层插件闪退问题
一.前言巨坑,基础没学好,导致找了一个下午的问题,终于被我发现了.说多都是泪,记录下来,以后有人遇到这个错误可以参考下做项目期间做了几个页面,需要用到弹出层,为了方便使用到了Layer的插件,然后 ...
Layui 弹出层插件
Layui 弹出层插件开发工具与关键技术: Visual Studio 2015 – Layui 作者:廖亚星撰写时间:2019年 6 月4日这段时间在做项目页面的搭建,在页面的操作中,会出现很 ...
Lightbox弹出层插件：jQuery弹出层插件用法
插件描述:这款lightbox,可应用于图片.swf文件.html文件等等. Lightbox弹出层插件说明文档 : 1.引入资源,(JQ1.3+)和JS文件: <script type=& ...
[置顶] 推荐一款好用的jquery弹出层插件——wbox
在我们做项目的过程中难免会让弹出层来展示一些信息,这里推荐一款比较不错的jquery插件,下面说一下特点和新版本增加的功能 wBox特点背景透明度可以根据实际情况进行调节可以根据需要添加wBox标 ...

colorbox弹出层插件使用方法及注意事项

colorbox弹出层插件使用方法及注意事项相关推荐

最新文章

热门文章