Создать оповещение с использованием материализации 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