Materialise CSS对话框 _MaterializeCSS

如果需要, 对话框用于显示其他信息。它们最初在页面上不可见。它们仅在用户想要查看内容时显示。
【Materialise CSS对话框】Materialize CSS提供了各种特殊方法来向用户显示警报。

Materialize.toast(message, displayLength, className, completeCallback);

参数说明消息：它指定要显示给用户的消息。
displayLength：指定消息消失的持续时间。
className：它指定要应用于烤面包的样式类。例如, “ 四舍五入” 。
completeCallback：它指定了在关闭烤面包后要调用的回调方法。
Materialize CSS为对话框提供了不同的CSS类：

Index	班级名称	Description
1)	tooltipped	它用于标识具有工具提示的组件。
2)	data-position	它指定工具提示的位置；底部, 顶部, 左侧或右侧。
3)	data-delay	它用于设置工具提示的持续时间, 此后它将消失
4)	data-tooltip	用于设置工具提示内容。

例子

< html> < head> < title> The Materialize Dialogs Example< /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 showToast(message, duration) {Materialize.toast(message, duration); }function showToast1(message, duration) {Materialize.toast('< i> '+ message + '< /i> ', duration); }function showToast2(message, duration) {Materialize.toast(message, duration, 'rounded'); }function showToast3(message, duration) {Materialize.toast('Hello World!', duration, '', function toastCompleted() {alert('Toast dismissed!'); }); }< /script> < /head> < body class = "container"> < h4> Toasts< /h4> < a class = "btn" onclick = "showToast('Hello World!', 3000)"> Normal Alert!< /a> < a class = "btn" onclick = "showToast1('Hello World!', 3000)"> Italic Alert!< /a> < a class = "btn" onclick = "showToast2('Hello World!', 3000)"> Rounded Alert!< /a> < br/> < br/> < a class = "btn" onclick = "showToast3('Hello World!', 3000)"> Callback Alert!< /a> < h4> Tooltips< /h4> < a class = "btn tooltipped" data-position = "bottom" data-delay = "50"data-tooltip = "I am in bottom!"> Bottom< /a> < a class = "btn tooltipped" data-position = "left" data-delay = "50"data-tooltip = "I am in left!"> Left< /a> < a class = "btn tooltipped" data-position = "right" data-delay = "50"data-tooltip = "I am in right!"> Right< /a> < a class = "btn tooltipped" data-position = "top" data-delay = "50"data-tooltip = "I am in top!"> Top< /a> < /body> < /html>

立即测试
输出