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

最新推荐文章于 2021-01-15 04:31:31 发布

daique1908

最新推荐文章于 2021-01-15 04:31:31 发布

阅读量926

点赞数

文章标签： css html js java 脚本语言 ViewUI

本文介绍如何使用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