<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>警告框</title>
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="icon" type="image/png" href="assets/i/favicon.png">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Amaze UI"/>
<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileColor" content="#0e90d2">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
</head>
<body style="margin: 20px;">
<!--基本形式-->
<div class="am-alert">
阅谁问君诵，水落清香浮。
</div>
<!--关闭按钮-->
<div class="am-alert" data-am-alert>
<button type="button" class="am-close">×</button>
<p>阅谁问君诵，水落清香浮。</p>
</div>
<!--不同状态-->
<div class="am-alert am-alert-success" data-am-alert>
<button type="button" class="am-close">×</button>
<p>阅谁问君诵，水落清香浮。</p>
</div>
<div class="am-alert am-alert-warning" data-am-alert>
<button type="button" class="am-close">×</button>
<p>阅谁问君诵，水落清香浮。</p>
</div>
<div class="am-alert am-alert-danger" data-am-alert>
<button type="button" class="am-close">×</button>
<p>阅谁问君诵，水落清香浮。</p>
</div>
<div class="am-alert am-alert-secondary" data-am-alert>
<button type="button" class="am-close">×</button>
<p>阅谁问君诵，水落清香浮。</p>
</div>
<!--多内容-->
<div class="am-alert" data-am-alert>
<button type="button" class="am-close">×</button>
<h3>涛声依旧</h3>
<p>《涛声依旧》由陈小奇作词、作曲。这首歌曲的灵感来自唐诗《枫桥夜泊》。</p>
<ul>
<li>月落乌啼总是千年的风霜</li>
<li>涛声依旧不见当初的夜晚</li>
</ul>
</div>
<!--JS 控制示例-->
<div class="am-alert" id="your-alert">
<button type="button" class="am-close">×</button>
<p>在应用 JS 激活之前这个警告框是无法关闭的。不信点右边的 x 试试。</p>
</div>
<button type="button" class="am-btn am-btn-danger" id="doc-alert-btn-bind">点击激活上面 Alert 的关闭功能</button>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
<script>
$(function() {
$('#doc-alert-btn-bind').one('click', function() {
$('#your-alert').alert();
alert('已激活，点击上的 X 试试！');
});
});
</script>
</body>
</html>
效果图：
相关推荐
AmazeUI弹出窗是基于JavaScript和CSS3构建的一个轻量级、响应式的前端框架组件，主要用于实现网页上的对话框、提示框等交互效果。它提供了丰富的定制选项，可以适应不同场景下的需求，同时保持良好的用户体验。在...
AmazeUI 模态窗口是基于前端框架AmazeUI的一个重要组件，用于在网页中创建弹出式的对话框。模态窗口通常用于显示警告、确认信息或者需要用户输入数据的场景，它会在用户与主页面交互时突然出现，并且阻止用户对背景...
首先，AmazeUI的按钮组件提供了多种样式和状态，包括默认按钮、主按钮、次按钮、成功按钮、警告按钮和危险按钮等，以满足不同场景的需求。这些按钮样式可以通过简单的类名添加到`<button>`或`<a>`标签上来实现。例如...
AmazeUI提供预设的颜色类，如`.am-progress-bar-default`（默认色）、`.am-progress-bar-success`（成功状态）、`.am-progress-bar-warning`（警告状态）和`.am-progress-bar-danger`（错误状态）。 4. **进度值**...
1. **弹出层组件**：如模态框、提示、警告框，用于显示临时信息或进行用户交互。 2. **表单验证**：自动验证用户输入，提升用户体验。 3. **轮播图组件**：实现图片或内容的自动切换展示。 4. **时间日期选择器**：...
在AmazeUI中，模态框（Modal）是一种非常实用的元素，用于在当前页面上弹出一个临时的对话窗口，通常用于显示警告、确认或提供额外信息。模态框的设计理念是尽可能不打断用户的浏览流程，同时又能提供必要的交互。 ...
AmazeUI小徽章是一个基于AmazeUI框架的组件，用于在网页中展示小巧而醒目的标记或提示信息。AmazeUI是中国首个开源HTML5移动跨屏前端框架，旨在提供一套适应不同屏幕尺寸、设备类型及浏览器的解决方案，使得开发者...
除了基本样式，AmazeUI按钮还支持多种颜色和大小的设定，比如`am-btn-primary`（主色调）、`am-btn-success`（成功状态）、`am-btn-warning`（警告状态）和`am-btn-danger`（危险操作）。同时，通过`am-btn-lg`、`am...
在这里，我们简单地弹出警告框展示用户的输入，但在实际项目中，通常会使用AJAX提交表单数据到服务器进行处理。 总结来说，实现AmazeUI中带有表单的模态输入框，主要涉及以下步骤： 1. 在HTML中创建模态框结构，...
AmazeUI 是一款轻量级、模块化的前端框架，它为开发者提供了丰富的组件，使得构建响应式、移动优先的网页变得更加便捷。在本示例中，我们将深入探讨如何使用AmazeUI 实现面板（Panel）功能，这在网页布局和信息展示...
- 提示和警告：用于通知用户的成功、错误或警告信息。 在实际开发中，开发者需要将这些静态页面与后端服务器进行连接，通过Ajax或者Fetch API获取和发送数据，实现数据的动态加载和交互。同时，考虑到安全性和性能...
3. **组件化**：Amaze提供了一系列预定义的UI组件，如导航菜单、按钮、表单、警告提示等，这些组件都是响应式的，可以根据屏幕大小自动调整。 4. **易于定制**：Amaze框架的代码结构清晰，便于开发者根据项目需求...