使用HTML5与CSS3创建一个模态窗口.docVIP

使用HTML5和CSS3创建一个模态窗口 日期：2013-11-28 09:01:40 模态框是在web开发者的兵工厂一个经常使用的工具。以及很多的东西，登陆/注册表格;广告;或者只是通知给用户。 然而尽管模态窗口通常包含关键任务信息，他们经常与JavaScript最佳实践坐好创建。 这并不需要是一个问题，因为HTML5和CSS3允许我们创建模态窗口提供方便。? 演示 我们现在要做的是使用CSS3的过渡，不透明度，指针事件，背景渐变属性来创建一个非常美丽和功能的模态对话框。 在HTML 第一步，创建我们的模态对话框是这样的短暂而甜蜜的标记： ahref=#openModalOpen Modal/a divid=openModalclass=modalDialog /div 正如你所看到的，我们只需要“打开模态”，并链接到我们的openModal的div放在正确的下方，上面写着一个简单的链接。我们正在做的一切都在这里有我们班的造型，所以我们使用的ID ，就像打开我们的模态对话框的挂钩，我们将使用modalDialog类款式应有尽有。 接下来，我们添加一个div标签，将持有我们所有的内容的模态对话框。这里面的div中，我们将有一个链接，关闭，我们将与我们的CSS样式的框。然后，我们将提出一个简单的标题与文本的几个段落下方。您的HTML标记现在看起来应该像这样： ahref=#openModalOpen Modal/a divid=openModalclass=modalDialog ??????? div ?????????????? ahref=#closetitle=Closeclass=closeX/a ?????????????? h2Modal Box/h2 ?????????????? pThis is a sample modal box that can be created using the powers of CSS3./p ?????????????? pYou 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属性坐在一切之上。 最后，我们设置一个很好的过渡对我们的模态对话框显示在屏幕上，并隐藏对话框时，它不是由显示器设置为none点击。 你可能不完全熟悉一下指针的事件属性，但它可以让你当你这样做，不想元素被点击的控制。我们将其设置为modalDialog类，因为我们不希望链接被点击，直到“：目标”伪类被触发。 ? 功能和外观 现在让我们来添加我们的：目标伪类，以及造型为我们的模态对话框。 .modalDialog:target { ??????? opacity:1; ??????? pointer-events: auto; } ? .modalDialog div { ??????? width:400px; ??????? position: re