Materialize CSS 对话框

由于Materialize 内置的响应式设计，用它制作的网站会根据不同的设备类型自动调整自身大小。开发Materialize类是为了使网站能够适应任何屏幕尺寸。所有PC、平板电脑和移动设备都可以访问用Materialize构建的网站。

Materialize 在设计上是扁平的、极其简单的。它的制作理念是：添加新的CSS规则远比改变已经存在的规则要简单得多。阴影和生动的色调都支持。在所有平台和设备上，色调和音调是一致的。也许最重要的是，使用它是完全免费的。

在这篇文章中，我们将讨论Materialize CSS中的对话框。

什么是Materialize CSS

Materialize CSS 是一个使用 CSS、JavaScript和HTML 开发的用户界面组件库。谷歌是设计它的公司。Material Design是物质化的CSS的另一个名字。它是一种设计语言，将创新和技术与久经考验的良好设计原则相融合。谷歌希望创建一个设计框架，使其所有产品在任何平台上都有一致的用户体验。

它是由谷歌创建的一套UI组件。它被用来构建美观、一致和有用的在线页面和网络应用，同时遵守当代的网页设计概念，如浏览器可移植性、设备独立性和温和的退化。它是一种传统的CSS，占地面积小。

它是开源的，需要 jQuery的JavaScript 库才能正常工作。它可以用来构建可重复使用的网络组件，并且是跨浏览器兼容的。包括卡片、标签、导航栏、祝酒词以及更多的升级和定制功能。它提供了典型的用户界面元素的更新变化，如按钮、复选框和文本字段，这些元素已被修改以遵守Material Design原则。

什么是对话框

对话框是一种图形控制元素，以小窗口的形式出现，向用户传达信息，同时也要求用户做出反应。

根据它们是否阻止与打开对话框的软件进行交流，对话框被分为 “模式” 和 “无模式 ” 。所需的用户互动决定了将显示的对话框的类型。

HTML元素 “对话框”象征着一个对话框或其他交互式元素，如一个子窗口、检查器或可取消的警报。

Materialize CSS中的对话框

Materialize CSS 中的对话框可以让用户根据需要访问更多的信息。这些信息不会立即显示在网站上。在那个特定的时间，需要的信息与对话框的转换有关。为了显示对话框，Materialize提供了几个选项。对话框是通常隐藏在页面上的材料片段，但在需要的时候会弹出更多的信息。用户不应该对这些变化感到惊愕，从对话框的外观来看，这些变化应该是合理的。Materialize中的Toasts给了你一个简单的方法来给你的用户提供谨慎的提醒。你可以通过点击下面的按钮来测试这些祝词在不同设备尺寸上的响应性和大小。

使用JavaScript代码以编程方式调用Materialize.toast() 函数来实现这一目的。一个HTML字符串也可以作为第一个参数提供。一旦祝酒辞被驳回，你可以让它回调某个函数。你可以轻松地定制CSS样式类，并将其作为可选参数添加到祝酒词中。

语法

Materialize.toast(content, timeDuration, class, callback);

参数

Content - 用于指定要在用户屏幕上显示的内容。
timeDuration - 它用于指定信息在屏幕上显示的时间长度。
Class - 用于指定应用在toast上的风格类的类型。
callback - 用于指定吐司解散后要调用的回调方法。

下面的Materialize和CDN链接需要写在<head>标签中 —

<link rel = “stylesheet” href = “https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css”>
<script type = “text/javascript” src = “https://code.jquery.com/jquery2.1.1.min.js”> </script>
<script src = “https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js”> </script>

例子

下面的例子演示了如何使用Materialize CSS在网页中添加不同类型的对话框。

<!DOCTYPE html>
<html>
<head>
   <title> Dialogs in Materialize CSS </title>
   <meta name= "viewport" content= "width = device-width, initial-scale = 1">
   <link rel= "stylesheet" href= "https://fonts.googleapis.com/icon?family=Material+Icons">
   <link rel= "stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
   <script type= "text/javascript" src= "https://code.jquery.com/jquery-2.1.1.min.js"> </script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   <script>
      function Box1(content, timeDuration) {
         Materialize.toast( '<b>' + content + '</b>', timeDuration, 'rounded' );
      }
      function Box2(content, timeDuration) {
         Materialize.toast('<em>' + content + '</em>', timeDuration );
      }
      function Box3(content, timeDuration) {
         Materialize.toast( '<u>' + content + '<u>', timeDuration );
      }
   </script>
</head>
<body class= "container">
   <h2 style= "textalign:center"> Materialize CSS </h2>
   <h4> Different Dialog boxes </h4>
   <a class= "btn" onclick= "Box1('Bold N rounded Alert!', 2000)"> Bold And rounded Alert box!! </a> <br> <br>
   <a class= "btn" onclick= "Box2('Emphasized Alert!', 2000)"> Emphasized Alert box!! </a> <br> <br>
   <a class= "btn" onclick= "Box3('Underlined Alert!', 2000)"> Underlined Alert box!! </a> <br> <br>
</body>
</html>

点击粗体和圆形提示框按钮，屏幕上将显示一个带有粗体文字的圆形提示框。点击强调提示框按钮时，将显示一个带有强调文字的矩形提示框。而点击下划线提示框时，将显示带下划线的矩形提示框。