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