在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。对话框才能正确显示。
正常弹出的对话框如下图所示: