轻量级的 jQuery 模拟弹出窗插件:Pop Easy

Pop Easy 介绍

Pop Easy 是一个用于快速创建模拟弹出窗(modals windows)的 jQuery 插件,这个 jQuery 插件非常轻量级,只有 2kb 大小,但是可以支持显示各种类型的 HTML 元素,以及视频。

Pop Easy

Pop Easy 的默认的模板已经非常不错,可以直接拿来使用,当然也可以通过 CSS 完全自己定制,另外这个插件还有非常多选项可以用来定制弹出窗的动态,比如速度,透明度,还有是否在网页加载的时候就打开等等。

Pop Easy 演示

点击这里查看演示

Pop Easy 使用

首先载入 jQuery 和 Pop Easy 的 JS 库。


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.modal.js'></script>

HTML 结构如下:


<a class="modalLink" href="#">点击这里查看演示</a>
<div class="overlay"></div>
<div class="modal">
	<a href="#" class="closeBtn">X</a>
</div>

定义相应的 CSS:


.overlay{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	display: none;
}
.modal{
	display: none;
	background:#eee;
	padding:0 20px 20px;
	overflow:auto;
	z-index:1001;
	position:absolute;
	width: 500px;
	min-height: 300px;
}

定义调用的 JS 代码:


$(document).ready(function(){
	$('.modalLink').modal({
		trigger: '.modalLink',
		olay:'div.overlay',
		modals:'div.modal',
		animationEffect: 'slidedown',
		animationSpeed: 400,
		moveModalSpeed: 'slow',
		background: '00c2ff',
		opacity: 0.8,
		openOnLoad: false,
		docClose: true,
		closeByEscape: true,
		moveOnScroll: true,
		resizeWindow: true,
		video:'http://player.vimeo.com/video/9641036?color=eb5a3d',
		close:'.closeBtn'
	});
});

下载:Pop Easy

标签:

热门文章