【AmazeUI】模態框，amazeui模態
本文與《【Ratchet】模態框》（點擊開啟連結）為姊妹篇，相比之下，AmazeUI的模態框，更加接近於一個alert()，不適合承載過多的內容，但是其優點就是可以通過JS操控，Ratchet僅能通過超級連結a標籤開啟。
AmazeUI的模態框效果如下：
完全就如同某些手機瀏覽器對alert()的處理。其現實代碼如下：
<!--使用HTML5開發--><!doctype html><html class="no-js"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--自動適應移動螢幕--> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!--優先使用webkit核心渲染--> <meta name="renderer" content="webkit"> <!--不要被百度轉碼--> <meta http-equiv="Cache-Control" content="no-siteapp"/> <!--以下才是引入amazeui資源--> <link rel="stylesheet" href="assets/css/amazeui.min.css"> <link rel="stylesheet" href="assets/css/app.css"> <!--引入js的時候要注意，必須先引入jQuery，再引入amazeui，因為這個架構是基於jQuery開發的--> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/amazeui.min.js"></script> <title>Modal</title> </head> <body> <button class="am-btn am-btn-primary" onclick="openModal()">開啟模態框</button> <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert"> <div class="am-modal-dialog"> <div class="am-modal-bd"> 模態框的內容 </div> <div class="am-modal-footer"> <span class="am-modal-btn">關閉</span> </div> </div> </div> </body></html><script>function openModal(){$('#my-alert').modal();}</script>注意到，這個id為my-alert的模態框，是通過button的onclick事件所觸發的openModal()函數觸發的。
其JS開啟模態框的代碼就一行，先擷取了模態框的id之後，通過modal()方法開啟。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
