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

最新推荐文章于 2021-05-31 16:33:55 发布

yz06061079

最新推荐文章于 2021-05-31 16:33:55 发布

阅读量3.9k

点赞数

分类专栏： javascript 文章标签： colorbox 对话框 javascript html5

本文链接：https://blog.csdn.net/yangzhen06061079/article/details/53236912

版权

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在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。对话框才能正确显示。

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