基于原生alert或者confirm的样式修改

发布时间 2023-04-24 12:10:05作者: WantRemake
  <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>