轻量级的 jQuery 模拟弹出窗插件:Pop Easy
2023-06-13 09:18:32 时间
Pop Easy 介绍
Pop Easy 是一个用于快速创建模拟弹出窗(modals windows)的 jQuery 插件,这个 jQuery 插件非常轻量级,只有 2kb 大小,但是可以支持显示各种类型的 HTML 元素,以及视频。
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
相关文章
- jQuery创建json对象
- 最简单的jquery模拟alert的弹窗插件详解编程语言
- jQuery核心及其工具详解编程语言
- jQuery给动态添加的元素绑定事件的方法详解编程语言
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js详解编程语言
- jQuery技巧大放送学习jquery的朋友可以看下
- jQuery温习篇强大的JQuery选择器
- js模拟jquery的slide和fadeIn和fadeOut功能
- JQuery中几个类选择器的简单使用介绍
- jquery+css+ul模拟列表菜单具体实现思路
- JQuery中关于jquery.js与jquery.min.js的比较探讨
- jQuery数据缓存功能的实现思路及简单模拟
- jquery触发a标签跳转事件示例代码
- jquery阻止冒泡事件使用模拟事件
- js/jQuery简单实现选项卡功能
- 移动节点的jquery代码
- 用jQuery模拟select下拉框的简单示例代码
- jQuery模拟点击A标记示例参考
- jquery复选框checkbox实现删除前判断
- jQuery照片伸缩效果不影响其他元素的布局
- jquery模拟LCD时钟的html文件源代码
- 使用jQuery简单实现模拟浏览器搜索功能
- 使用JavaScript链式编程实现模拟Jquery函数
- jquery中checkbox全选失效的解决方法
- 用队列模拟jquery的动画算法实例
- jquery实现勾选复选框触发事件给input赋值