jquery.reveal_使用jQuery Reveal插件构建弹出模态窗口

本文介绍如何使用jQuery Reveal插件创建弹出模态窗口,包括HTML和CSS的基础设置,按钮和模态窗口的创建,以及如何通过CSS3 Media Queries使其适应移动设备。
摘要由CSDN通过智能技术生成

jquery.reveal

今天,我们将采用Orman的弹出模态窗口 ,并使用HTML和CSS重新创建它。 然后,我们将使用jQuery Reveal插件为其提供全部功能。 我们甚至会更进一步,添加一些CSS3 Media Queries以使其适应移动使用。 让我们开始吧!

[这是一个简单的小模式窗口,非常适合预览中显示的小确认消息。 不,使用Comic Sans没有任何借口。 奥曼·克拉克

步骤1: HTML5基础

我们将从使用HTML5标记创建空白文档开始。 我们已经链接到样式表和HTML5 Shiv,这将允许HTML5元素在IE中正确呈现。 至关重要的是,我们还链接到了页面底部的最新jQuery库(由Google托管),以优化页面加载。

最后,您可能会注意到我们在脑海中也加入了另一行。 视口元标记。 无论设备的屏幕大小如何,这将使设备能够正确解释我们的页面。 如果您想了解更多有关此的信息,请务必查看此快速提示

<!DOCTYPE html>
<html>
<head>

	<!--Meta tags-->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!--Title-->
	<title>Pop Up Modal Window</title>
		
	<!--Stylesheets-->
	<link rel="stylesheet" href="css/styles.css">

	<!--HTML5 Shiv-->
	<!--[if lt IE 9]>
			<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	
</head>
<body>






	<!--jQuery-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

</body>
</html>

步骤2:下载Reveal

在开始添加任何标记和样式之前,我们将下载Reveal插件。 转到http://www.zurb.com/playground/reveal-modal-plugin,然后点击页面右侧的“下载Reveal套件”。

解压缩已下载的文件。 您需要将jquery.reveal.js复制到网站的根目录,或者复制到您喜欢的任何文件夹。 我创建了一个名为“ js”的文件夹,通常在其中保存我JavaScript资源。 接下来,我们需要引用我们的脚本,因此请在jQuery脚本之后复制以下内容,以确保路径正确。

<script src="js/jquery.reveal.js"></script>

步骤3:建立按钮

对于本教程,我们将创建一个按钮,单击该按钮可以激活模式。 我继续学习了Orman的Simple Web Buttons免费赠品中的按钮样式。

<body>

	<a href="#" id="button">Click me</a>

在使用某些样式之前,我们将快速添加一个重置项以从浏览器中删除所有不需要的边距等。 我们还为正文添加了一些样式,只是字体系列,背景,并且将字体大小固定为100%。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, hea
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值