基于原生alert或者confirm的样式修改
<style> #alertModel {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 99999;background: rgba(0, 0, 0, 0.6);display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;text-align: center;} #alertModel .inner {width: 15%;background-color: #fff;border-radius: 10px;min-width: 4.8rem;} #alertModel .inner .t {height: 80px;border-bottom: 1px solid #d5d5d5;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;padding: 0.2rem;text-align: center;} #alertModel .inner .t span {color: #444;font-size: 1rem;letter-spacing: 0.016rem;} #alertModel .inner .b {height:26px; display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;} #alertModel .inner .b a {width: 100%;height: 0.8rem;line-height: 0.8rem;text-align: center;font-size: 1rem;color: #e67a15;} #alertModel .inner .confirmbu {display: flex;justify-content: space-around;} </style> <script type="text/javascript"> window.alert = function (msg, callback) { var model = $('<div id="alertModel"><div class="inner"><div class="t"><span>' + msg + '</span></div><div class="b"><a href="javascript:;">确定</a></div></div></div>') $('body').append(model) $('body').one('click', '#alertModel .b a', function (e) { $('#alertModel').remove() callback && callback() }) } window.confirm = function (msg, callback) { var model = $('<div id="alertModel"><div class="inner"><div class="t"><span>' + msg + '</span></div><div class="confirmbu"><div class="b"><a class="a1" href="javascript:;">确定</a></div><div class="b"><a class="a2" href="javascript:;">取消</a></div></div></div></div>') $('body').append(model) $('body').one('click', '#alertModel .b .a1', function (e) { alert('分配成功'); $('#alertModel').remove() }) $('body').one('click', '#alertModel .b .a2', function (e) { $('#alertModel').remove() callback && callback() }) } </script>
本文来自博客园,作者:WantRemake,转载请注明原文链接:https://www.cnblogs.com/SmallChen/p/17349032.html