这篇文章主要介绍了AmazeUI模态窗口的实现代码，代码简单易懂，非常不错，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

实现代码如下所示：

！声明文档类型

html class='no-js '

头

meta charset='utf-8 '

元http-equiv=' X-UA-兼容'内容='IE=edge '

元名称='描述'内容=' '

元名称='关键字'内容=' '

元名称='视口'内容='宽度=设备宽度，初始比例=1 '

标题模态窗口/title

链接rel='样式表href=' assets/CSS/amazeui。量滴' CSS '

！-(GTE IE 9)|！(IE)]！-

脚本src=' assets/js/jquery。量滴js '/脚本

！- ![endif] -

！-[如果lte IE 8 ]

脚本src=' assets/ie8/jquery。量滴js '/脚本

剧本唐山应用开发src=' assets/ie8/modernizr。js '/脚本

脚本src=' assets/js/amazeui。ie8 polyfill。量滴js '/脚本

！[endif] -

脚本src=' assets/js/amazeui。量滴js '/脚本

/head

body style=' margin: 50px '

！-基本形式-

纽扣

type='button '

class='am-btn am-btn-primary '

data-am-modal=' { target : ' # doc-modal-1 '，closeViaDimmer: 0，width: 400，height: 225} '

情态动词

/按钮

div class=' am-modal am-modal-no-BTN ' tabindex='-1 ' id=' doc-modal-1 '

div class='am-modal-dialog '

div class='am-modal-hd'Modal标题

a href=' JavaScript : void(0)' class=' am-close am-close-spin ' data-am-modal-closetimes；/a

/div

div class='am-modal-bd '

情态动词内容。本情态动词无法通过遮罩层关闭。

/div

/div

/div

！-模拟警报-

纽扣

type='button '

class='am-btn am-btn-primary '

data-am-modal=' { target : ' # my-alert ' } '

警报

/按钮

div class=' am-modal am-modal-alert ' tabindex='-1 ' id=' my-alert '

div class='am-modal-dialog '

div class='am-modal-hd '拍案惊奇用户界面/分区

div class='am-modal-bd '

你好世界！

/div

div class='am-modal-footer '

span class='am-modal-btn '确定/span

/div

/div

/div

！-模拟确认-

纽扣

type='button '

class='am-btn am-btn-warning '

id='doc-confirm-toggle '

确认

/按钮

ul class=' am-list confirm-list ' id=' doc-modal-list '

铅工业协会数据-id='1' href='# '每个人都有一道伤口，或深或浅，盖上布，以为不存在/ai class='am-icon-close'/i/li

/ul