轻量级的 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 库。

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

HTML 结构如下:

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

定义相应的 CSS:

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

定义调用的 JS 代码:

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

下载:Pop Easy

标签:

热门文章