首页 > 其他分享 >基于原生alert或者confirm的样式修改

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

时间:2023-04-24 12:11:40浏览次数:35  
标签:原生 flex alertModel center confirm align alert webkit display

  <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>

 

标签:原生,flex,alertModel,center,confirm,align,alert,webkit,display
From: https://www.cnblogs.com/SmallChen/p/17349032.html

相关文章

  • Serverless安全风险研究 - 云原生新计算范式下安全风险继承与新生
    一、Serverless背景0x1:从“硬件”到“Serverless”的变革之路在“云”的概念还没有产生之前,开发者购买物理机,并在其上部署应用程序,企业将购买的机器放置数据中心,其网络、安全配置均需要专业的技术人员管理,在这种高成本运营模式下,虚拟化技术应运而生。技术首先进化出的是虚拟机,......
  • 云原生之docker容器资源管理
    一、本次实践介绍1.本次实践环境1.本次实践环境为ECS云服务器;2.本次实践为个人测试环境,生产环境请谨慎使用;3.本次实践为研究docker容器的资源管理,加深对docker容器的理解;2.登录ECS云服务器二、docker环境检查1.检查docker版本检查docker版本[root@ecs-7501~]#dockerversion......
  • 【已结束】直播预告|传统 PvE 游戏 ∕ 开房间 PvP 游戏的云原生架构升级
    OpenKruiseGame(OKG) 是阿里云和国内多家一线游戏头部公司一起孵化的云原生游戏开源项目,旨在将云原生的能力通过OpenKruiseGame更好的传达给游戏服,降低学习成本,提高使用效率,助力游戏基础架构云原生转型。OpenKruiseGame在社区开源半年以来,得到了游戏行业的广泛关注,其游戏服以序......
  • 原生ip代理如何帮助跨境网络营销优化 SEO 排名?
    随着全球化的加速和数字化时代的到来,跨境网络营销在过去几年中发展迅速,并成为企业扩大海外市场的重要手段之一。其中提高SEO排名是非常重要的,因为SEO排名可以提高网站在搜索引擎结果页面中的排名,从而吸引更多的访问者和潜在客户。 使用StormProxies提供的ip 代理可以帮......
  • 全栈声明式可观测:KubeVela 的云原生应用洞察体系
    随着云原生技术的日趋成熟,越来越多的工作负载都迁移到Kubernetes之上,包括各类无状态微服务和复杂的有状态应用。为了支撑这些应用所需的各项基础设施,开发者不得不面对大量的底层API。这就形成了两个挑战,一方面是难以标准化,各种工作负载自身都会形成自己的运维管理平台,带来了企......
  • 直播预告 | 字节跳动云原生大数据分析引擎 ByConity 与 ClickHouse 有何差异?
    ByContiy是字节跳动开源的一款云原生的大数据分析引擎,擅长交互式查询和即席查询,具有支持多表关联复杂查询、集群扩容无感、离线批数据和实时数据流统一汇总等特点。ByConity从1月份发布开源beta版本之后,陆续收到社区询问ByConity和ClickHouse差异的反馈:“ByConity有没......
  • uniapp directive 在原生 wgt 包不生效 uniapp directive 不生效
    需求根据权限编码禁用按钮阻止当前dom绑定的点击事件,禁用状态(opacity半透明??或者display:none??)尝试开发环境用Chrome跑,一切正常,构建打包后去真机跑,按钮没控制住(用HBX-发行-原生应用app制作wgt包)开发环境:HBX:3.7.9系统:MacOS:13.0.1(Intel)通过direct......
  • 云原生之部署wordpress博客及设置圣诞主题风格
    (云原生之部署wordpress博客及设置圣诞主题风格)一、前言1.本次实践目的1.使用docker部署wordpress网站2.配置圣诞主题风格2.wordpress介绍WordPress是使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。也可以把WordPress当作一个......
  • 91-云原生操作系统-Kubernetes网络通信常见架构及案例解析
    VxLAN技术演进VxLAN的技术演进二层通信-基于目标mac地址通信,不可夸局域网通信,通常是由接入交换机或汇聚交换机实现报文转发。VLAN(VirtualLocalAreaNetwork)-即虚拟局域网,是将一个物理(交换机)的网络在逻辑上划分成多个广播域的通信技术,VLAN内的主机间可以直接通信,而VLAN网络外......
  • 火山引擎云原生数据仓库 ByteHouse 技术白皮书 V1.0 (Ⅴ)
     更多技术交流、求职机会,欢迎关注字节跳动数据平台微信公众号,回复【1】进入官方交流群近日,《火山引擎云原生数据仓库ByteHouse技术白皮书》正式发布。白皮书简述了ByteHouse基于ClickHouse引擎的发展历程,首次详细展现ByteHouse的整体架构设计及自研核心技术,为云原生数据仓......