首页 > 其他分享 >修改默认alert样式

修改默认alert样式

时间:2023-07-06 22:34:50浏览次数:27  
标签:nbaDialog 样式 transform 默认 alert color webkit position

 

alert

简单的弹窗,常用于调试时判断代码执行到哪里出问题(类似断点)

例子:

alert("11111")

this.$aleret

this.alert() 方法用于显示带有一个标题,一条指定消息,一个关闭按钮和一个确定按钮的警告框。
例子:

this.$alert(`hhhhhhh`, 'biaoti', {
                confirmButtonText: '关闭'
            })

 

    

 

 修改完alert样式

window.alert = function (msg, callback) {
    var div = document.createElement("div");
    div.innerHTML = "<style type=\"text/css\">"
    + ".nbaMask { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); } "
    + ".nbaMaskTransparent { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; } "
    + ".nbaDialog { position: fixed; z-index: 5000; width: 80%; max-width: 300px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff; text-align: center; border-radius: 8px; overflow: hidden; opacity: 1; color: white; }"
    + ".nbaDialog .nbaDialogHd { padding: .2rem .27rem .08rem .27rem; } "
    + ".nbaDialog .nbaDialogHd .nbaDialogTitle { font-size: 17px; font-weight: 400; } "
    + ".nbaDialog .nbaDialogBd { padding: 0 1rem; font-size: 15px; line-height: 1.3; word-wrap: break-word; word-break: break-all; color: #000000; } "
    + ".nbaDialog .nbaDialogFt { position: relative; line-height: 48px; font-size: 17px; display: -webkit-box; display: -webkit-flex; display: flex; } "
    + ".nbaDialog .nbaDialogFt:after { content: \" \"; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } "
    + ".nbaDialog .nbaDialogBtn { display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; color: #09BB07; text-decoration: none; -webkit-tap-highlight-color: transparent; position: relative; margin-bottom: 0; } "
    + ".nbaDialog .nbaDialogBtn:after { content: \" \"; position: absolute; left: 0; top: 0; width: 1px; bottom: 0; border-left: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleX(0.5); transform: scaleX(0.5); } "
    + ".nbaDialog a { text-decoration: none; -webkit-tap-highlight-color: transparent; }"
    + "</style>"
    + "<div id=\"dialogs2\" style=\"display: none\">"
    + "<div class=\"nbaMask\"></div>"
    + "<div class=\"nbaDialog\">"
    + " <div class=\"nbaDialogHd\">"
    + " <strong class=\"nbaDialogTitle\"></strong>"
    + " </div>"
    + " <div class=\"nbaDialogBd\" id=\"dialog_msg2\">弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内</div>"
    + " <div class=\"nbaDialogHd\">"
    + " <strong class=\"nbaDialogTitle\"></strong>"
    + " </div>"
    + " <div class=\"nbaDialogFt\">"
    + " <a href=\"javascript:;\" class=\"nbaDialogBtn nbaDialogBtnPrimary\" id=\"dialog_ok2\">确定</a>"
    + " </div></div></div>";
    document.body.appendChild(div);
    
    var dialogs2 = document.getElementById("dialogs2");
    dialogs2.style.display = 'block';
    
    var dialog_msg2 = document.getElementById("dialog_msg2");
    dialog_msg2.innerHTML = msg;
    
    var dialog_ok2 = document.getElementById("dialog_ok2");
    dialog_ok2.onclick = function () {
    dialogs2.style.display = 'none';
    callback();
    };
    };

 

标签:nbaDialog,样式,transform,默认,alert,color,webkit,position
From: https://www.cnblogs.com/dlx609/p/17533522.html

相关文章

  • vue(五)CSS样式添加
    Vue具有三种样式化应用程序的方法:外部CSS文件。单文件组件(.vue文件)中的全局样式。单文件组件中组件范围的样式。外部CSS导入外部CSS文件import"./assets/reset.css";单组件全局样式<style>/*全局样式*/.btn{padding:0.8rem1rem0.7rem;......
  • css动态生成多个class样式
    在纯CSS中,无法动态生成多个类样式。CSS是一种静态样式表语言,它主要用于描述网页上元素的外观和布局,而不能在运行时动态生成类样式。然而,你可以通过使用CSS预处理器(如Sass、Less等)或CSS-in-JS工具(如StyledComponents、Emotion等)来在一定程度上实现动态生成类样式的效果。举例来......
  • 28.无缝滚动(默认向上滚动)
    vue-seamless-scroll使用手册:https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/properties.html步骤一:gitbash输入:npminstallvue-seamless-scroll--save步骤二:main.js全局注册importscrollfrom'vue-seamless-scroll'Vue.use(scroll)步骤三:组件中使用......
  • 直播平台源码,默认页面几秒后自动跳转另一页面
    直播平台源码,默认页面几秒后自动跳转另一页面publicclassMainActivityextendsAppCompatActivity{   privatestaticfinallongDELAY=1000;  privateTimerTasktask;   @Override  protectedvoidonCreate(BundlesavedInstanceState){    ......
  • SQL Developer 默认是不会自动提交事务
    SQLDeveloper默认是不会自动提交事务SQLDeveloper这软件,在执行数据库数据修改操作时,并不会进行SQL提交。SQLDeveloper默认是不会进行自动提交,必须通过手动的方式提交。如:insertintomytable(id,name) values(1,'tom'); commit;......
  • 2023-07-06 微信开发者工具上传代码,在体验版查看时发现小程序的一些全局字体样式不生
    前言:在less中使用【@样式变量】如:@global_color:var(--global_color,red);问题描述:在开发工具中字体样式能正常显示,预览扫码到真机上也能显示字体颜色,结果上传代码到了提样版就不行了,样式不生效。这里用到了一个var函数,“var()函数用于插入自定义的属性值,如果一个属性值在......
  • MySQL创建默认当前时间字段
    MySQL创建一个时间字段默认当前时间,插入数据时无需给这个字段添加值,会自动默认当前时间类型:timestamp,默认值:CURRENT_TIMESTAMP ......
  • 十、添加资源文件和使用样式
    1、添加资源文件(.qrc文件)1.1创建项目并打开项目1.2Ctrl+n创建新文件,选择“QT”文件下边的“QtResourceFile”。 1.3输入文件名和选择保存路径1.4将需要添加的资源文件复制到项目目录下1.5导入资源文件到Qt项目中1.5.1 为资源文件添加前缀(类似于文件夹) 1.5.2......
  • RV1126调试-修改默认调试串口
    背景RK系列的SDK给的默认的调试串口都是uart2/1500000波特率,本次调试设备已经把console调试口改为了uart0,所以需要修改下uboot和内核,然后把波特率设为常用的115200。注:本次调试的SDK版本为原厂的V2.2版本1.uboot修改1)修改rv1126-evb.dts和rv1126-u-boot.dtsi把uart2改成uart......
  • 去除内容多余样式php函数-文章来源 植物号 www.zhiwuhao.com
    去除内容多余样式php函数-文章来源植物号 www.zhiwuhao.comfunctionKillStyle($content){$content=preg_replace("/STYLE=.+?['|\"]/i",'',$content);//去除样式$content=preg_replace("/style=.+?['|\"]/i",'',$conte......