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

Denis

发布于 2023-04-14 16:09:24

1.5K0

发布于 2023-04-14 16:09:24

文章被收录于专栏：WordPress果酱WordPress果酱

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css