首页 | 简单教程,简单编程

代码编辑器：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/foundation/5.5.3/css/foundation.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/foundation/5.5.3/js/foundation.min.js"></script>
<script src="https://cdn.bootcss.com/foundation/5.5.3/js/vendor/modernizr.js"></script>

<div style="padding:20px;">
<h2>关闭提醒框</h2>
<div data-alert class="alert-box">
This is a default alert box.
<a href="#" class="close">×</a>
</div>

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

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

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

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

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

代码编辑器：

运行结果：