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

Pop Easy 介绍

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

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

Pop Easy 演示

点击这里查看演示

X

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！