修改系统默认 alert 弹框样式

修改默认 alert 弹框，思路很简单，定义一个 alert(e) 函数，加载最开头即可。

css部分：

<style>#msg{width:266px;position: fixed;z-index:999;top: 49%;margin-top:-80px;left:50%;margin-left:-133px;background:#fff;box-shadow:5px 5px 8px #999;font-size:17px;color:#666;border:1px solid #f8f8f8;text-align: center;line-height: 2rem;display:inline-block;padding-bottom:20px;border-radius:2px;}#msg_top{background:#f8f8f8;padding:5px 15px 5px 20px;text-align:left;}#msg_top span{font-size:22px;float:right;cursor:pointer;}#msg_cont{padding:15px 20px 20px;text-align:left;}#msg_clear{display:inline-block;color:#fff;padding:1px 15px;background:#8fc31f;border-radius:2px;float:right;margin-right:15px;cursor:pointer;}
</style>

因为弹框是通过js后期加入的，所以高宽是无法通过js获取的，所以要让弹框居中在窗口中要自己定义一下宽度；或者最外层包一个width:100% 的块，让弹框在这个块中居中

js部分：

<script>window.alert =alert;function alert(e){$("body").append('<div id="msg"><div id="msg_top">信息<span class="msg_close">×</span></div><div id="msg_cont">'+e+'</div><div class="msg_close" id="msg_clear">确定</div></div>');$(".msg_close").click(function (){$("#msg").remove();});}
</script>

进行调用

alert("123");

修改系统默认 alert 弹框样式相关推荐

解决ant design vue中的modal弹框样式修改无效问题修改modal样式无效
ant design vue中的modal弹框修改样式无效问题 ant中的弹框样式是修改不了的原因在于弹框modal被挂载在最大的元素div外面了所以需要将挂载在某个html元素上在modal外 ...
vue弹出alert_Vue实现移动端 message-box 与 alert 弹框@郝晨光
GIF.gif 前言最近在做移动端的项目,需要制作移动端的alert弹框和message-box提示信息:之前使用Vue框架的element-ui时,就记得element-ui的弹框,今天深入的研究 ...
高仿微信聊天界面长按弹框样式
效果图背景在公司做的项目里面,刚好有需要用到微信聊天界面长按弹框样式这种UI的. 网上找了一下,没找到. Android现成的 ListPopupWindow又不能满足需求. 因此在非上班时间撸一 ...
优化element ui中的弹框样式
element ui 虽然提高了开发效率,但是坑也不少,比如弹框的体验就不佳: 弹框体验不佳自带的弹框样式有很多缺点,比如不居中,大小会超出屏幕然后在最右侧出现滚动条,看不到footer里的按钮等. ...
怎么更改计算机管理员的用户名,如何修改系统默认账户administrator
windows系统都会有几个默认账户,如administrator表示默认的管理员,guest表示默认的来宾用户.下面就让学习啦小编教大家如何修改系统默认账户administrator吧. 修改系统默 ...
js原生alert弹框美化
1.说明通过自定义方式美化弹框,使用alert弹框错误提示 2.示例 html代码片段: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
html select 样式t调整_css修改html select下拉框样式(含右边箭头)
css修改html select下拉框样式(含右边箭头)2017-10-12 16:51 我们经常会看到一些页用用的select下拉框非常漂亮,其实很多是用插件实现的. 如果不使用插件,靠纯css能不 ...
w10计算机字体怎么设置在哪里设置,win10电脑修改系统默认字体的方法｜win10系统怎么设置字体大小...
win10电脑怎么改变系统字体?修改系统默认字体的方法 win10电脑怎么改变系统字体?系统字体一直都是一尘不变,虽然看起来方方正正比较便于确认,但总有用户想要修改系统默认字体设置,怎么修改系统默认字 ...
Android修改系统默认设置
1.launcher的布局太居中,要想两边拉伸 <\packages\apps\Launcher2\res\values\dimens.xml> <dimen name=&qu ...
Android7.1修改系统默认多媒体音量大小
Android7.1修改系统默认多媒体音量大小始修改\frameworks\base\packages\SettingsProvider\res\values\defaults.xml def_mu ...

修改系统默认 alert 弹框样式

修改系统默认 alert 弹框样式相关推荐

最新文章

热门文章