使用HTML5创建模态窗口&Amp; CSS3

Keenan Payne. 经过 Keenan Payne.  |  2012年10月02日

模态框是Web开发人员中的常用工具’arsenal。用于许多东西,登录/注册表格;广告;或只是向用户通知。

然而,尽管模态Windows经常包含关键任务信息,但它们是用JavaScript创建的,这与逐行增强或优雅的最佳实践不顺利​​。

这一点’T需要是一个问题,因为html5&CSS3允许我们轻松创建模态窗口。

 

演示

我们将要做的是使用CSS3的转换,不透明度,指针事件和背景渐变属性来创建一个非常漂亮且功能的模态框。

你可以 在这里查看一个演示.

 

html.

创建我们的模态框的第一步是这个简短但甜蜜的标记: 

<a href="#openModal">Open Modal</a>

<div id="OpenModal." class="modaldialog">
	
</div>

正如您所看到的,我们只有一个简单的链接,称“开放模态”并链接到我们的链接 OpenModal. div右下方放在它下面。我们正在使用课程进行所有造型,所以我们使用ID作为打开我们的模态框的挂钩,我们将使用它的所有风格 modaldialog class. 

接下来,我们添加一个div标记,它将在模态框中保存所有内容。在这个div的里面,我们将有一个链接来关闭我们将与我们的CSS风格的框。然后,我们将在它下面的一些文本段落进行简单的标题。您的HTML标记现在应该如下所示:

<a href="#openModal">Open Modal</a>

<div id="OpenModal." class="modaldialog">
	<div>
		<a href="#close" title="关闭" class="close">X</a>
		<h2>Modal Box</h2>
		<p>This is a sample modal box that can be created using the powers of CSS3.</p>
		<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
	</div>
</div>

 

开始造型

现在我们只有一个与div的链接显示在它之下。我们将开始造型的盒子并实际上练功。让我们首先创造我们的 modaldialog 课程并开始前进。 

.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}

这里的代码很简单。我们通过将其提供固定位置来屏蔽我们的对话框,这意味着它将在页面上移动,如果滚动,请打开。我们还将顶部,右侧,底部和左边缘设置为0,以便我们的黑暗背景将跨越整个监视器。

由于我们将想要在模态框周围的背景下来时变暗,因为它打开时,我们将背景设置为黑色,并稍微更改不透明度。我们还确保我们的模态框通过设置Z-Index属性坐在所有内容之上。

最后,我们为模态框设置了一个很好的过渡,以在屏幕上显示,并通过将显示设置为无,隐藏框。 

您可能无法完全熟悉指针事件属性,但它允许您在执行时控制,并且不希望将元素可点击。我们为我们设置了 modaldialog 类因为我们不希望链接可点击直到“:target”伪课被解雇。

 

功能和外表

现在让我们添加我们的 :目标 伪类以及我们模态框的样式。

.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div {
	width: 400px;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
}

跟我们 目标 伪类,我们将显示屏设置为块,以便在链接点击链接时,我们将显示模态框。我们还使用我们的指针 - 事件属性,以便在链接徘徊时’s active. 

然后,我们通过设置宽度,位置和使用我们的边缘来撞击从顶部下降的模态框,并将其居中在我们的页面上的模态框。然后,我们通过创建一些填充,设置一个漂亮的边框半径,并使用白色到深灰色的背景来添加一点样式。

Step 3

 

关闭它

现在我们已经设计了模态框并使其功能奏效,我们需要做的最后一件事是让我们的关闭按钮看起来不错。使用CSS3和HTML5可以创建一个看起来像图像的按钮,但实际上不是。这是我们使用的CSS:

.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }

对于我们的关闭按钮,我们将背景按钮设置并使用我们的文本对齐和线路高度定位文本。然后我们使用位置绝对地定位按钮,并设置我们的顶级和右边属性。我们如何使它成为一个圆圈并添加一些深度?我们将边框半径设置为12并创建轻微的丢弃阴影。然后添加一点用户响应,当您悬停在其上时,我们将背景更改为浅蓝色(其他用于悬停的想法包括添加线性转换以逐渐变化,更改字体文本,或稍微扩展盒子阴影)。

Step 4

 

为什么我们的模态盒子更好

正如您可能注意到的那样,具有此技术的大卖点正在HTML5和CSS3中创建模态框。为什么这么大的优惠? JavaScript中的模态框是初学者可以创建的东西,有数百个示例和下载准备使用。那么为什么我们要把JavaScript汇总支持HTML5和CSS3? 

我说一个卖点正在确保javascript的人可以使用它们;统计数据显示,在没有JavaScript的情况下,只有2%的人浏览,所以如果这不是一个问题,那是什么?嗯,我们在创建模态框时利用CSS3转换。完整的代码是:

-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;

我们只使用了三行代码来创建动画。如果将其与任何JavaScript动画库进行比较,则会震惊地查看我们的代码最小化程度。这导致另一个原因,即我们拥有更清洁的代码。我们知道动画适用的div,它只有3行。这使我们很容易修改它或改变DIV,因为我们认为适合,而不必担心在JavaScript以及CSS和HTML中更改DIV。 

最后,HTML5和CSS3是未来的。每个人都在努力将它们实施到他们的设计和项目中,并使用它们有助于延续它的采用并确保您没有留下。您可以获得更清晰的代码,您不必担心JavaScript库,您还有一个完整的网页设计师和开发人员,可以帮助您提供您可能拥有的任何问题,因为它们很兴奋,也可以了解更多关于语言的信息。 HTML5和CSS3不会在任何地方进行,因此没有理由不使用它们。

 

何时使用模态框

所以现在我们已经涵盖了如何制作模态框以及为什么要使用HTML5和CSS3制作,何时应该使用模态框? 

登录/注册表单

我认为模态框在用于登录和注册表单时特别有用。它为用户创造了这样的简化体验,并且真的可以对您的访客留下印象。

登录

 

显示图像/视频

模态框的另一个出色使用是显示图像或视频(通常称为灯箱)。它允许用户在不离开网页的情况下查看网站的内容,从而让他们进一步投入您的Web体验。

灯箱

 

用户反馈

当用户在网页上交互时,您要对其进行通信或提醒他们的东西,而不是模态框是什么更好的方法? Facebook在您想要在其网站上更改语言时,或者像“为什么要为为什么提供我的生日”链接时,那么这就会很大的优势。如果它没有足够的文字或需要是整个页面,为什么不使用模态框? 

警报

 

广告

使用模态框的广告广告的一个很好的例子是音乐无线电服务潘多拉。如果您不是他们的优质服务的成员,每次偶尔都会在您的屏幕上获得广告。有时这些是音频广告,看起来你只是在听一首歌,有时它是一个视频的弹出框。这对于希望在页面上注入广告的人来说,这是一个伟大的策略,而不会总是在页面上。

广告

 

结论

在那里,您拥有它,您现在可以创建一个简单的HTML5和CSS3模态框,您可以使用它,以便为用户登录/注册表格,广告等等使用它。您还了解了为什么我们应该使用HTML5和CSS3而不是JavaScript,并看过网站如何使用模态框以及如何将它们实施到您自己的设计中的一些示例。

 

你是由html5的可能性兴奋的吗? &CSS3? JavaScript最终会走闪光的方式吗?在下面的评论中借给我们您的意见。

缩略图 通过shutterstock。