在Materialize CSS中解释对话框

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

Materialize的设计是扁平和极简的。它是根据一个原则而设计的，即增加新的CSS规则要比修改现有规则要简单得多。它支持阴影和鲜明的色调。无论在哪个平台和设备上，色调和色调都是一致的。最重要的是，使用它完全免费。

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

什么是Materialize CSS

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

它是由谷歌创建的一套UI组件。它用于构建美观、一致且有用的在线页面和Web应用程序，同时遵循现代Web设计概念，如浏览器的可移植性、设备的独立性和平缓退化。它是一个传统的CSS，占用空间很小。

它是开源的，需要jQuery JavaScript库才能正常工作。它可以用来构建可重用的Web组件，并且是跨浏览器兼容的。它包含了卡片、选项卡、导航栏、吐司等更新和自定义功能。它提供了根据Material Design原则进行修改的常见用户界面元素的更新版本，例如按钮、复选框和文本字段。

什么是对话框

对话框是一种以小窗口形式出现并向用户传达信息并请求反应的图形控件元素。

根据它们是否阻止与打开对话框的软件进行通信，对话框分为“模态”或“非模态”。“所显示的对话框类型取决于所需的用户交互方式。

HTML元素“对话框”表示对话框或其他交互元素，例如子窗口、检查员或可关闭的警报。

Materialize CSS中的对话框

Materialize CSS中的对话框在需要时为用户提供更多信息。这些信息在网页上不会立即显示。那时需要的信息与对话框的转换相关。为了显示对话框，Materialize提供了几个选项。对话框是通常在页面上隐藏的一些材料，但在需要时弹出显示更多信息。用户不应该对这些变化感到惊讶，这些变化应该从对话框的外观中让用户感知到。Materialize中的吐司为您提供了一种简单的方式来向用户发送离散的警报。您可以通过点击下面的按钮在各种设备尺寸上测试这些吐司的响应性放置和大小。

使用JavaScript代码来编程调用 Materialize.toast() 函数来实现此功能。也可以将HTML字符串作为第一个参数提供。一旦toast被关闭，你可以让它回调某个函数。你可以很容易地自定义CSS样式类，并将其作为可选参数添加到toast中。

语法

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

参数

content - 用于指定要在用户屏幕上显示的内容。
timeDuration - 用于指定消息在屏幕上显示的时间长度。
Class - 用于指定应用于toast上的样式类的类型。
Callback - 用于指定toast消失后要调用的回调方法。

下面的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>

点击加粗和圆角警告框按钮，一个圆角形状的加粗文本警告框将显示在屏幕上。点击强调的警告框按钮，一个带有强调文本的矩形警告框将显示。而点击带下划线的警告框，则会显示带下划线文本的矩形警告框。