轻量级的 jQuery 模拟弹出窗插件:Pop Easy
Pop Easy 介绍
Pop Easy 是一个用于快速创建模拟弹出窗(modals windows)的 jQuery 插件,这个 jQuery 插件非常轻量级,只有 2kb 大小,但是可以支持显示各种类型的 HTML 元素,以及视频。
Pop Easy 的默认的模板已经非常不错,可以直接拿来使用,当然也可以通过 CSS 完全自己定制,另外这个插件还有非常多选项可以用来定制弹出窗的动态,比如速度,透明度,还有是否在网页加载的时候就打开等等。
Pop Easy 演示
Pop Easy 使用
首先载入 jQuery 和 Pop Easy 的 JS 库。
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