Foundation reminder box


May 04, 2021 11:00 Foundation5


Table of contents


Foundation reminder box

Foundation can simply create a reminder box:

Foundation reminder box

Reminder boxes can .alert-box class, and optional classes can be added: .secondary .success .info .warning .alert :

Instance

< div data-alert class= "alert-box" >
This is a default alert box.
< /div >

< div data-alert class= "alert-box secondary" >
This is a secondary alert box.
< /div >

< div data-alert class= "alert-box success" >
< strong > Success! < /strong > This alert box indicates a successful or positive action.
< /div >

< div data-alert class= "alert-box info" >
< strong > Info! < /strong > This alert box indicates a neutral informative change or action.
< /div >

< div data-alert class= "alert-box warning" >
< strong > Warning! < /strong > This alert box indicates a warning that might need attention.
< /div >

< div data-alert class= "alert-box alert" >
< strong > Alert! < /strong > This alert box indicates a dangerous or potentially negative action.
< /div >

尝试一下 »
Foundation reminder box 提醒框的宽度为容器的 100%。

圆角提醒框

.radius .round 类用于为提醒框添加圆角:

实例

< div data-alert class= "alert-box success radius" >
< strong > Success! < /strong > Alert box with a radius.
< /div >

< div data-alert class= "alert-box info round" >
< strong > Info! < /strong > Alert box that is rounded.
< /div >

尝试一下 »

关闭提醒框

To close the reminder box, you can add class="close" element and initialize Foundation JS:

实例

< div data-alert class= "alert-box" >
This is a default alert box with closing functionality.
< a href= "#" class= "close" > &times; < /a >
< /div >

< script >
Initialize Foundation JS For Functionality
$(document).ready(function() {
$(document).foundation();
})
< /script >

尝试一下 »
Foundation reminder box &times; (×) is an HTML character entity that represents an icon that closes the button, not the letter "x".