使用物化css創建警報

Question

我想使用物化css創建警報。我不知道如何。請幫忙。我只是想創建一個簡單的HTML，將顯示一個警告錯誤，而不使用JavaScript。謝謝。

Answer 1

$(document).ready(function(){ 

    Materialize.toast('I am Alert', 4000) 

}); 

見DEMO這裏：http://codepen.io/ihemant360/pen/pbPyJb

Answer 2

不幸的是物化爲引導做不提供警報。 您可以使用card-panel類代替：

http://materializecss.com/color.html

但你不會有關閉按鈕將其隱藏。

Answer 3

這是一個相當晚的答案，但您可以使用modal類來處理這些事情。

例子：

$(document).ready(function(){ 
 
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 
 
    $('.modal').modal(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.css" rel="stylesheet"/> 
 

 
    <!-- Modal Trigger --> 
 
    <a class="waves-effect waves-light btn" href="#modal1">Modal</a> 
 

 
    <!-- Modal Structure --> 
 
    <div id="modal1" class="modal"> 
 
    <div class="modal-content"> 
 
     <h4>Alert</h4> 
 
     <p>You can use this as a alert!</p> 
 
    </div> 
 
    <div class="modal-footer"> 
 
     <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">OK</a> 
 
    </div> 
 
    </div>

參考：http://materializecss.com/modals.html#！

Answer 4

Materializecss警告框 Codepen link

<div class="row" id="alert_box"> 
<div class="col s12 m12"> 
    <div class="card red darken-1"> 
    <div class="row"> 
    <div class="col s12 m10"> 
     <div class="card-content white-text"> 
     <p>1. Username cant be empty</p> 
     <p>2. Password cant be empty</p> 
     <p>3. Address cant be empty</p> 
     <p>4. Name cant be empty</p> 
    </div> 
    </div> 
    <div class="col s12 m2"> 
    <i class="fa fa-times icon_style"        id="alert_close" aria-hidden="true"></i> 
    </div> 
    </div> 
    </div> 
    </div> 
    </div> 

.icon_style{ 
position: absolute; 
right: 10px; 
top: 10px; 
font-size: 20px; 
color: white; 
cursor:pointer; 
} 

$('#alert_close').click(function(){ 
$("#alert_box").fadeOut("slow", function() { 
}); 
}); 

Answer 5

您可以使用Matdialog.js創建不同類型dialogboxes的。

檢查出來 - MatDialog.js website