弹出容易

所属分类:UI-弹出层

 19361  33  查看评论 (0)
弹出容易 ie兼容

具有重量轻的jQuery插件,是一个必须有任何开发人员可以轻松地创建模态窗口。应用蒙版到您的网页,打开一个可定制的模态窗口弹出,将焦点放在重要元素。

使用步骤

HTML

包括脚本文件

包括当前版本的jQuery

<script type='text/javascript' src='js/jquery.modal.js'></script>
<script type='text/javascript' src='js/site.js'></script>

body中

<a class="modalLink" href="#">Click Me
<div class="overlay"></div>
<div class="modal">
	<a href="#" class="closeBtn">Close Me</a>
	<!-- content here -->
</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;
}

JAVASCRIPT

$(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'

	});

});

如何使用多模态


要使用多模态在一个页面上,您必须同步触发您要打开的div的id的href属性。这个工程从一个开放的模态过渡到另一个相同。只需放置一个链接,你想离开href属性相匹配的ID下模态的模态。


href="#modal1"


如何使用视频

要使用托管或是Vimeo,YouTube上的视频等嵌入的iframe中的模态。然后通过插件的src属性的视频选项,并设置一类。类名是必需的元素,必须通过插件,当一个iframe嵌入,最好是设置为false的moveOnScroll。

相关插件-弹出层

zDiaLog弹出层

zDiaLog弹出层
  弹出层
 36702  39

easyDialog 简单、实用的弹出层组件

easyDialog没有模板机制,只负责逻辑层的弹出效果,至于内容(消息框、表单、图片等)该如何呈现,easyDialog都不管,内容属于业务层的东西,业务需求是千变万化的,如果逻辑和业务结合很紧密,那么可移植性和可扩展性将大大降低。
  弹出层
 18103  82

一款简单实用的弹窗插件JMask(原创)

JMask是一款遮罩插件,其小巧灵活,在项目开发中方便实用。使用方式也特别简单,只需要引入一个js文件,该插件基于JQuery开发,所以使用之前需要引入JQuery文件。
  弹出层
 6482  54

弹出容易

具有重量轻的jQuery插件,是一个必须有任何开发人员可以轻松地创建模态窗口。应用蒙版到您的网页,打开一个可定制的模态窗口弹出,将焦点放在重要元素。
  弹出层
 19361  33

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币

取消回复