首先用css渲染一个样式

#msg{
height: 2rem;
text-align: center;
position: fixed;
top: 50%;
margin-top: -1rem;
line-height: 2rem;
width: 100%;
}
#msg span{
color: #fff;
background: rgba(0,0,0,0.6);
height: 2rem;
display: inline-block;
padding: 0 3rem;
border-radius: 5px;
}

然后js匿名一个函数,用的时候就直接用alert事件就行了

function alert(e){
$("body").append("<div id='msg'><span>"+e+"</span></div>");
clearmsg();
}
function clearmsg(){
var t = setTimeout(function(){
$("#msg").remove();
},2000)
};

js alert(“”)弹框 自定义样式的更多相关文章

  1. JavaScript实现自定义alert弹框

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAh0AAAFkCAYAAACEpYlzAAAfj0lEQVR4nO3dC5BddZ0n8F93pxOQCO

  2. 自定义alert弹框,title不显示域名

    问题: 系统默认的alert弹框的title会默认显示网页域名 解决办法: (修改弹框样式) (function() { window.alert = function(name) { $(" ...

  3. 自定义alert弹框,title不显示域名(重写alert)

    问题: 系统默认的alert弹框的title会默认显示网页域名 解决办法: (修改弹框样式) (function() { window.alert = function(name) { $(" ...

  4. 仿写confirm和alert弹框

    在工作中,我们常常会遇到原生的样式感觉比较丑,又和我们做的项目风格不搭.于是就有了仿写原生一些组件的念头,今天我就带大家仿写一下confirm和alert样式都可以自己修改. 有些的不好的地方请指出来 ...

  5. selenium对Alert弹框的多种处理

    Alert弹框是一个很烦人的控件,因为当前页面如果弹出了该弹框,你必须要处理它,不然你就不能操作页面的其它元素,下面我列出了alert弹框在多种场景下的处理办法. 明确知道系统哪个地方会弹alert ...

  6. python工具 - alert弹框输出姓名年龄、求和

    使用python自带的tkinter库进行GUI编程,完成两个功能: (1)要求用户输入姓名和年龄然后打印出来 (2)要求用户输入一个数字,然后计算1到该数字之间的和 代码部分: # 导入tkinte ...

  7. 操作JavaScript的Alert弹框

    @Testpublic void testHandleAlert(){ WebElement button =driver.findElement(By.xpath("input" ...

  8. 手写alert弹框(一)

    采用原生的JavaScript, html代码 <meta name="viewport" content="width=device-width, initial ...

  9. Js仿弹框

    收藏一个简单实用的JS弹框,通过隐藏和显示div来实现,代码来自脚本之家! <html> <head> <title> LIGHTBOX EXAMPLE </ ...

随机推荐

  1. 微信公众平台开发-OAuth2.0网页授权(含源码)

    微信公众平台开发-OAuth2.0网页授权接口.网页授权接口详解(含源码)作者: 孟祥磊-<微信公众平台开发实例教程> 在微信开发的高级应用中,几乎都会使用到该接口,因为通过该接口,可以获 ...

  2. Laravel的console使用方法

    适用场景:分析数据(日志) php artisan make:console 你的命令类名 示例: php artisan make:console Check 在\app\Console\Comma ...

  3. 做推送,怎么能不了解推送的 4 种消息形式呢?(iOS 篇)

    极光推送是为 App 提供第三方推送服务的平台之一,它提供四种消息形式:通知,自定义消息,富媒体和本地通知.笔者将基于官方说明与个人理解来谈一下这四种消息.本篇为 iOS 篇,Android 篇入口. ...

  4. 免费企业ERP系统OA+ERP

    AIO5基于B/S架构而研发,集成了OA(办公自动化).SCM(供应链管理).FM(财务管理)三大主力单元.支持手机APP. 协助中小型企业全面管理采购.销售业务, 规范仓库进出,处理与合作伙伴的往来 ...

  5. Spring框架(4)---AOP讲解铺垫

    AOP讲解铺垫      不得不说,刚开始去理解这个Aop是有点难理解的,主要还是新的概念比较多,对于初学者一下子不一定马上能够快速吸收,所以我先对什么事Aop做一个解释: 首先说明:本文不是自己所写 ...

  6. 写lua时需要注意的地方

    条件语句判断时,只有false和nil会导致判断为假,其他的任何值都为真. Lua 的字符串与编码无关: 它不关心字符串中具体内容. 标准 Lua 使用 64 位整数和双精度(64 位)浮点数, 但你 ...

  7. java实现多叉树查找

    package tree; import java.util.List; import java.util.ArrayList; import java.io.Serializable; public ...

  8. Swashbuckle Swagger组件扩展

      用Swagger有一段时间, 我的model层是一个单独的dll 但给Swagger配置的是api层dll的XML. 所以就导致了model字段的注释不能够反应到参数说明. 所以我fork了一份 ...

  9. redux-form的学习笔记

    redux是一种常用的与react框架搭配的一种数据流架构,而伴随着redux的出现,也出现了许多基于redux开源的第三方库,而redux-form就是其中之一的开源组件库,到今天我写下这篇笔记为止 ...

  10. Ionic2开发笔记(2)创建子页面及其应用

    1. 当你第一次产生ionic2应用程序,这是生成的项目结构 ├── ├── config.xml      这包含配置应用程序的名称,和包名,将被用于我们的应用程序安装到一个实际的设备. ├── h ...