在html5中如何使用AmazeUI实现模态窗口效果

2024-10-26 技术教程

这篇文章主要为大家展示了“在html5中如何使用AmazeUI实现模态窗口效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“在html5中如何使用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"><scriptsrc="assets/js/jquery.min.js"></script><scriptsrc="assets/js/amazeui.min.js"></script></head><body><buttontype="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>×</a></div><divclass="am-modal-bd">Modal内容。本Modal无法通过遮罩层关闭。</div></div></div><buttontype="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><buttontype="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><buttontype="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><buttontype="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><buttontype="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><buttontype="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-closeclass="am-close">×</span></div><divclass="am-popup-bd">...</div></div></div></body></html>

以上是“在html5中如何使用AmazeUI实现模态窗口效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！