AmazeUI如何实现模态窗口

tangjin

作者

这篇文章主要介绍AmazeUI如何实现模态窗口，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

实现代码如下所示：

<!doctypehtml>
<htmlclass="no-js">
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="description"content="">
<metaname="keywords"content="">
<metaname="viewport"content="width=device-width,initial-scale=1">
<title>模态窗口</title>
<linkrel="stylesheet"href="assets/css/amazeui.min.css">
<!--[if(gteIE9)|!(IE)]><!-->
<scriptsrc="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[iflteIE8]>
<scriptsrc="assets/ie8/jquery.min.js"></script>
<scriptsrc="assets/ie8/modernizr.js"></script>
<scriptsrc="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<scriptsrc="assets/js/amazeui.min.js"></script>
</head>
<bodystyle="margin:50px;">
<!--基本形式-->
<button
type="button"
class="am-btnam-btn-primary"
data-am-modal="{target:'#doc-modal-1',closeViaDimmer:0,width:400,height:225}">
Modal
</button>
<divclass="am-modalam-modal-no-btn"tabindex="-1"id="doc-modal-1">
<divclass="am-modal-dialog">
<divclass="am-modal-hd">Modal标题
<ahref="javascript:void(0)"class="am-closeam-close-spin"data-am-modal-close>&times;</a>
</div>
<divclass="am-modal-bd">
Modal内容。本Modal无法通过遮罩层关闭。
</div>
</div>
</div>
<!--模拟Alert-->
<button
type="button"
class="am-btnam-btn-primary"
data-am-modal="{target:'#my-alert'}">
Alert
</button>
<divclass="am-modalam-modal-alert"tabindex="-1"id="my-alert">
<divclass="am-modal-dialog">
<divclass="am-modal-hd">AmazeUI</div>
<divclass="am-modal-bd">
Helloworld！
</div>
<divclass="am-modal-footer">
<spanclass="am-modal-btn">确定</span>
</div>
</div>
</div>
<!--模拟Confirm-->
<button
type="button"
class="am-btnam-btn-warning"
id="doc-confirm-toggle">
Confirm
</button>
<ulclass="am-listconfirm-list"id="doc-modal-list">
<li><adata-id="1"href="#">每个人都有一道伤口，或深或浅，盖上布，以为不存在。</a><iclass="am-icon-close"></i></li>
</ul>
<divclass="am-modalam-modal-confirm"tabindex="-1"id="my-confirm">
<divclass="am-modal-dialog">
<divclass="am-modal-hd">AmazeUI</div>
<divclass="am-modal-bd">
你，确定要删除这条记录吗？
</div>
<divclass="am-modal-footer">
<spanclass="am-modal-btn"data-am-modal-cancel>取消</span>
<spanclass="am-modal-btn"data-am-modal-confirm>确定</span>
</div>
</div>
</div>
<script>
$(function(){
$('#doc-modal-list').find('.am-icon-close').add('#doc-confirm-toggle').
on('click',function(){
$('#my-confirm').modal({
relatedTarget:this,
onConfirm:function(options){
var$link=$(this.relatedTarget).prev('a');
varmsg=$link.length?'你要删除的链接ID为'+$link.data('id'):
'确定了，但不知道要整哪样';
alert(msg);
},
//closeOnConfirm:false,
onCancel:function(){
alert('算求，不弄了');
}
});
});
});
</script>
<!--模拟Prompt-->
<button
type="button"
class="am-btnam-btn-success"
id="doc-prompt-toggle">
Prompt
</button>
<divclass="am-modalam-modal-prompt"tabindex="-1"id="my-prompt">
<divclass="am-modal-dialog">
<divclass="am-modal-hd">AmazeUI</div>
<divclass="am-modal-bd">
来来来，吐槽点啥吧
<inputtype="text"class="am-modal-prompt-input">
</div>
<divclass="am-modal-footer">
<spanclass="am-modal-btn"data-am-modal-cancel>取消</span>
<spanclass="am-modal-btn"data-am-modal-confirm>提交</span>
</div>
</div>
</div>
<script>
$(function(){
$('#doc-prompt-toggle').on('click',function(){
$('#my-prompt').modal({
relatedTarget:this,
onConfirm:function(e){
alert('你输入的是：'+e.data||'')
},
onCancel:function(e){
alert('不想说!');
}
});
});
});
</script>
<!--ModalLoading-->
<button
type="button"
class="am-btnam-btn-success"
data-am-modal="{target:'#my-modal-loading'}">
ModalLoading
</button>

<divclass="am-modalam-modal-loadingam-modal-no-btn"tabindex="-1"id="my-modal-loading">
<divclass="am-modal-dialog">
<divclass="am-modal-hd">正在载入...</div>
<divclass="am-modal-bd">
<spanclass="am-icon-spinneram-icon-spin"></span>
</div>
</div>
</div>
<!--Actions-->
<button
type="button"
class="am-btnam-btn-secondary"
data-am-modal="{target:'#my-actions'}">
Actions
</button>
<divclass="am-modal-actions"id="my-actions">
<divclass="am-modal-actions-group">
<ulclass="am-list">
<liclass="am-modal-actions-header">提示信息</li>
<li><ahref="#"><spanclass="am-icon-wechat"></span>微信</a></li>
<liclass="am-modal-actions-danger">
<ahref="#"><iclass="am-icon-twitter"></i>twitter</a>
</li>
</ul>
</div>
<divclass="am-modal-actions-group">
<buttonclass="am-btnam-btn-secondaryam-btn-block"data-am-modal-close>取消</button>
</div>
</div>
<!--Popup-->
<button
type="button"
class="am-btnam-btn-danger"
data-am-modal="{target:'#my-popup'}">
Popup
</button>
<divclass="am-popup"id="my-popup">
<divclass="am-popup-inner">
<divclass="am-popup-hd">
<h5class="am-popup-title">...</h5>
<spandata-am-modal-close
class="am-close">&times;</span>
</div>
<divclass="am-popup-bd">
...
</div>
</div>
</div>
</body>
</html>

效果图：