修改alert提示框的css样式

本教程重写了alert方法,可修改蒙版颜色,提示信息的字体颜色,按钮背景颜色,按钮字体颜色,按钮水平位置等,修改方式为设定好的变量中直接修改变量值,若有需要也可直接修改本教程中的代码.

重写后的弹出框不仅仅能够显示文字,也可以显示图片,甚至是其他内容,具体效果可在该文章最后面查看提供的图片.

使用时,建议封装到单独的文件中,作为插件使用,如alert.js.

window.alert = function(msg){var maskBg = '#0000002b';                       //蒙版展示色var zIndex = 999999;                            //修改弹出层z-index,应为最顶层,避免被覆盖var desColor = '#1f0000'                       //提示信息字体颜色var buttonVal = '确定';                          //确定按钮名称var btnBgColor = '#f61717';                      //确定按钮背景颜色var btnColor = '#fff';                         //确定按钮字体颜色var btnAlign = 'right';                            //按钮在水平位置,默认居中,变量值:left,center,rightvar style = `<style class="mask-style">.box-sizing{box-sizing: border-box;}.alertMask{position: fixed;   /*生成绝对定位的元素，相对于浏览器窗口进行定位*/display: flex;display: webkit-flex;flex-direction: row;align-items: center;justify-content: center;width: 100%;height: 100%;top: 0;left: 0;z-index: `+zIndex+`;background: `+maskBg+`;}.alertContainer{min-width: 240px;   /*容器最小240px*/max-width: 320px;  /*容器最大320px*/background:#fff;border: 1px solid `+maskBg+`;border-radius: 3px;color: `+desColor+`;overflow: hidden;                                  }.alertDes{padding: 35px 30px;text-align: center;letter-spacing: 1px;font-size: 14px;color: `+desColor+`;}.alertDes img{max-width: 100%;height: auto;}.alertConfirmParent{width: 100%;padding: 20px 30px;text-align: `+btnAlign+`;box-sizing: border-box;background: #f2f2f2;}.alertConfirmBtn{cursor: pointer;padding: 8px 10px;border: none;border-radius: 2px;color: `+btnColor+`;background-color: `+btnBgColor+`;box-shadow: 0 0 2px `+btnBgColor+`;}</style>`;var head = document.getElementsByTagName('head')[0];head.innerHTML += style     //头部加入样式,注意不可使用document.write()写入文件,否则出错const body = document.getElementsByTagName('body')[0];var alertMask = document.createElement('div');var alertContainer = document.createElement('div');var alertDes = document.createElement('div');var alertConfirmParent = document.createElement('div');var alertConfirmBtn = document.createElement('button');    body.append(alertMask);alertMask.classList.add('alertMask');alertMask.classList.add('box-sizing');alertMask.append(alertContainer);alertContainer.classList.add('alertContainer');alertContainer.classList.add('box-sizing');alertContainer.append(alertDes);alertDes.classList.add('alertDes');alertDes.classList.add('box-sizing');alertContainer.append(alertConfirmParent);alertConfirmParent.classList.add('alertConfirmParent');alertConfirmParent.classList.add('box-sizing');   alertConfirmParent.append(alertConfirmBtn);alertConfirmBtn.classList.add('alertConfirmBtn');alertConfirmBtn.classList.add('box-sizing');alertConfirmBtn.innerText = buttonVal;//加载提示信息 alertDes.innerHTML = msg;//关闭当前alert弹窗function alertBtnClick(){body.removeChild(alertMask);maskStyle = head.getElementsByClassName('mask-style')[0];head.removeChild(maskStyle);    //移除生成的css样式}alertConfirmBtn.addEventListener("click", alertBtnClick);
}

展示文字示例:

alert('被修改的alert样式如我所示')

效果

显示图片示例:

alert('<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=184640506,305875080&fm=11&gp=0.jpg"/>')

效果

如有不足或建议,请留言指出,谢谢!
转载自：吾爱自学

修改alert提示框的css样式相关推荐

Vue组件编写之Alert提示框组件编写
Alert提示框的vue组件编写最近一直学习vue,跟着视频敲代码,敲了两三个组件后,终于对编写组件有一个大致的思路了,以下通过编写一个alert提示框组件大致梳理一下我编写组件的思路. 主要分为三 ...
php中如何写js代码提示_PHP 如何编写类似js中alert() 提示框
这篇文章主要介绍了PHP 实现类似js中alert() 提示框功能,非常的实用,这里推荐给大家,有需要的小伙伴来参考下,希望大家能喜欢. 主要应用于添加判断提示,跳转,返回,刷新. 代码如下:/** ...
Css-note:修改input文本框边框焦点样式笔记
Css-note:修改input文本框边框焦点样式笔记大家好,我是Yangrl. 记录一个note: 刚才做作业,就觉得浏览器中鼠标点击input,默认样式不合口味,又不想js / jq,所以改吧( ...
HTML5 JS alert提示框内容换行显示
关于HTML中的 alert提示框内容换行显示草率简单叙述一下,当然方法不止这一种问题这里我想让输出的内容换行对齐显示我首先想到了html中的 br 换行这是初始代码 <a href= ...
Vue ElementUI 修改消息提示框样式---messageBox 的大小
在窄屏模式下(移动端),提示框的宽度太宽,会出现显示不完全的问题. 应当如何修改 ElementUI 的样式呢? open() {this.$confirm(window.vm.$i18n.t(&qu ...
自定义alert提示框
引言:在做js前端的时候,很多时候,我们会用到alert来显示提示信息,但是不同的浏览器,alert显示出来的效果也大不相同,尤其是chrom浏览器,显示出来在顶端,用起来很不方便,为此,考虑到信息框 ...
前端JavaScript DOM BOM 自学复盘 D1（DOM-获取DOM元素、修改HTML标签/表单/css样式属性、定时器-间歇函数）
内容概要 1. Web API 基本认知 1.1. 作用和分类 1.2. 什么是DOM 1.3. DOM作用 1.4 DOM树 1.4.1. DOM树是什么? 1.4.2. DOM 树的作用 1.5 ...
JS: prompt() 输入框 confim（）确认框 alert() 提示框
三种系统弹窗 * 弹出提示框 alert() * 输入弹出框 prompt() * 可以给两个值,中间用逗号隔开 ,第一个值表示给用户的提示 ...
解决Vue用v-html、v-text渲染后台富文本框文本内容样式修改问题，用自定义css样式无法渲染出对应效果的问题
举例: 如果您要加载富文本框内容的DOM id是detail 那么就这么写scss样式 #detail {font-size: 14px;text-align: center;&>> ...
html css文本框按钮,css样式之区分input是按钮还是文本框的方法
当你看到这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框?一个复选框?--对,对,对,它们都对.也许你可能想不到,这个小小的input竟然可以创造出10个不同的东西,下面是个列表 ...

修改alert提示框的css样式

修改alert提示框的css样式相关推荐

最新文章

热门文章