Fork me on GitHub

基于原生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>
复制代码

 

posted @   WantRemake  阅读(609)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)
点击右上角即可分享
微信分享提示