自定义alert弹框，去掉IP以及端口号提示
最新版例子~~ 如果同时多个弹框，只显示第一个
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<button onclick="alert('haha')">點擊</button>
<script>
function alert() {
var myAlertBigBoxIsTrue = document.getElementById('myMLBAlertBigBox');
console.log(myAlertBigBoxIsTrue);
if (myAlertBigBoxIsTrue === null) { // 創建一個遮罩層
var bigbox = document.createElement("div");
bigbox.id = "myMLBAlertBigBox";
//创建一个大盒子
var box = document.createElement("div");
var myspan = document.createElement('span');
//创建一个关闭按钮
var button = document.createElement("button"); bigbox.appendChild(box);
// 設置遮罩層的樣式
var bigboxName = {
"width": "100%",
"height": "100vh",
"background-color": "rgba(0,0,0,0.4)",
"position": "fixed",
"top": "0",
"left": "0",
"z-index": "1000",
"text-align": "center"
}
//给元素添加元素
for (var k in bigboxName) {
bigbox.style[k] = bigboxName[k];
}
//定义一个对象保存样式
var boxName = {
width: "500px",
height: "180px",
backgroundColor: "white",
border: "1px solid rgb(226,222,222)",
position: "absolute",
"box-shadow": "5px 5px 10px 2px rgba(0,0,0,0.4)",
top: "20%",
"border-radius": "5px",
left: "50%",
margin: "-90px 0 0 -250px",
zIndex: "1001",
textAlign: "center",
lineHeight: "180px"
}
//给元素添加元素
for (var k in boxName) {
box.style[k] = boxName[k];
}
//把创建的元素添加到body中
document.body.appendChild(bigbox);
//把alert传入的内容添加到box中
if (arguments[0]) {
// box.innerHTML = arguments[0];
myspan.innerHTML = arguments[0];
}
// 定義span樣式
var spanName = {
"text-align": "left",
"line-height": "30px",
"border-radius": "5px",
"outline": "none",
"word-break": "break-all",
"position": "absolute",
"overflow-y": "auto",
"overflow": "auto",
"height": "112px",
"top": "20px",
"right": "25px",
"left": "25px", }
for (var j in spanName) {
myspan.style[j] = spanName[j];
} // bigbox.appendChild(box);
box.appendChild(myspan);
button.innerHTML = "关闭";
//定义按钮样式
var btnName = {
border: "1px solid #ccc",
backgroundColor: "#fff",
width: "70px",
height: "30px",
textAlign: "center",
lineHeight: "30px",
"border-radius": "5px",
outline: "none",
position: "absolute",
bottom: "10px",
right: "20px", }
for (var j in btnName) {
button.style[j] = btnName[j];
}
//把按钮添加到box中
box.appendChild(button);
//给按钮添加单击事件
button.addEventListener("click", function () {
bigbox.style.display = "none";
var idObject = document.getElementById('myMLBAlertBigBox');
if (idObject != null)
idObject.parentNode.removeChild(idObject);
})
} else {
return;
}
}
alert('hah1111a')
alert('hah2222')
alert('ha3333333')
alert('ha4444')
</script>
</body> </html>
先放一个例子吧
// 因需求增加提示框，樣式需要增加到容易修改的地方
// 彈框樣式一 沒什麼樣式 去掉了ip地址而已
alert1(name){
var iframe = document.createElement("IFRAME");
iframe.style.display="none";
iframe.setAttribute("src", 'data:text/plain,');
document.documentElement.appendChild(iframe);
window.frames[0].window.alert(name);
iframe.parentNode.removeChild(iframe);
}
// 彈框樣式一
// 彈框樣式二 粉色的 不好看沒加遮罩層，可以加一個再用
alert2(name){
//创建一个大盒子
var box = document.createElement("div");
var myspan = document.createElement('span');
//创建一个关闭按钮
var button = document.createElement("button");
//定义一个对象保存样式
var boxName = {
width:"500px",
height:"180px",
backgroundColor: "#fff1f0",
border: "1px solid #ffa39e",
position:"absolute",
top:"20%",
"border-radius": "5px",
left:"50%",
margin:"-90px 0 0 -250px",
zIndex:"999",
textAlign:"center",
lineHeight:"180px"
}
//给元素添加元素
for(var k in boxName){
box.style[k] = boxName[k];
}
//把创建的元素添加到body中
document.body.appendChild(box);
//把alert传入的内容添加到box中
if(arguments[0]){
// box.innerHTML = arguments[0];
myspan.innerHTML = arguments[0];
}
// 定義span樣式
var spanName = {
"text-align": "left",
"line-height": "30px",
"border-radius": "5px",
"outline": "none",
"word-break": "break-all",
"position": "absolute",
"overflow-y": "auto",
"overflow": "auto",
"height": "112px",
"top": "20px",
"right": "25px",
"left": "25px"
}
for(var j in spanName){
myspan.style[j] = spanName[j];
}
box.appendChild(myspan);
button.innerHTML = "关闭";
//定义按钮样式
var btnName = {
border:"1px solid #ccc",
backgroundColor:"#fff",
width:"70px",
height:"30px",
textAlign:"center",
lineHeight:"30px",
"border-radius": "5px",
outline:"none",
position:"absolute",
bottom:"10px",
right:"20px", }
for(var j in btnName){
button.style[j] = btnName[j];
}
//把按钮添加到box中
box.appendChild(button);
//给按钮添加单击事件
button.addEventListener("click",function(){
box.style.display = "none";
})
}
// 彈框樣式二
// 彈框樣式三 白色的 還行吧 有遮罩層
alert(name) {
// 創建一個遮罩層
var bigbox = document.createElement("div");
//创建一个大盒子
var box = document.createElement("div");
var myspan = document.createElement('span');
//创建一个关闭按钮
var button = document.createElement("button"); bigbox.appendChild(box);
// 設置遮罩層的樣式
var bigboxName = {
"width": "100%",
"height": "100vh",
"background-color": "rgba(0,0,0,0.4)",
"position": "fixed",
"top": "0",
"left": "0",
"z-index": "1000",
"text-align": "center"
}
//给元素添加元素
for (var k in bigboxName) {
bigbox.style[k] = bigboxName[k];
}
//定义一个对象保存样式
var boxName = {
width: "500px",
height: "180px",
backgroundColor: "white",
border: "1px solid rgb(226,222,222)",
position: "absolute",
"box-shadow": "5px 5px 10px 2px rgba(0,0,0,0.4)",
top: "20%",
"border-radius": "5px",
left: "50%",
margin: "-90px 0 0 -250px",
zIndex: "1001",
textAlign: "center",
lineHeight: "180px"
}
//给元素添加元素
for (var k in boxName) {
box.style[k] = boxName[k];
}
//把创建的元素添加到body中
document.body.appendChild(bigbox);
//把alert传入的内容添加到box中
if (arguments[0]) {
// box.innerHTML = arguments[0];
myspan.innerHTML = arguments[0];
}
// 定義span樣式
var spanName = {
"text-align": "left",
"line-height": "30px",
"border-radius": "5px",
"outline": "none",
"word-break": "break-all",
"position": "absolute",
"overflow-y": "auto",
"overflow": "auto",
"height": "112px",
"top": "20px",
"right": "25px",
"left": "25px", }
for (var j in spanName) {
myspan.style[j] = spanName[j];
} // bigbox.appendChild(box);
box.appendChild(myspan);
button.innerHTML = "关闭";
//定义按钮样式
var btnName = {
border: "1px solid #ccc",
backgroundColor: "#fff",
width: "70px",
height: "30px",
textAlign: "center",
lineHeight: "30px",
"border-radius": "5px",
outline: "none",
position: "absolute",
bottom: "10px",
right: "20px", }
for (var j in btnName) {
button.style[j] = btnName[j];
}
//把按钮添加到box中
box.appendChild(button);
//给按钮添加单击事件
button.addEventListener("click", function () {
bigbox.style.display = "none";
})
}
// 彈框樣式三
// 因需求增加提示框，樣式需要增加到容易修改的地方
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button onclick="alert('haha')">點擊</button>
<script>
function alert(){
//创建一个大盒子
var box = document.createElement("div");
var myspan = document.createElement('span');
//创建一个关闭按钮
var button = document.createElement("button");
//定义一个对象保存样式
var boxName = {
width:"500px",
height:"180px",
backgroundColor: "#fff1f0",
border: "1px solid #ffa39e",
position:"absolute",
top:"20%",
"border-radius": "5px",
left:"50%",
margin:"-90px 0 0 -250px",
zIndex:"999",
textAlign:"center",
lineHeight:"180px"
}
//给元素添加元素
for(var k in boxName){
box.style[k] = boxName[k];
}
//把创建的元素添加到body中
document.body.appendChild(box);
//把alert传入的内容添加到box中
if(arguments[0]){
// box.innerHTML = arguments[0];
myspan.innerHTML = arguments[0];
}
// 定義span樣式
var spanName = {
"text-align": "left",
"line-height": "30px",
"border-radius": "5px",
"outline": "none",
"word-break": "break-all",
"position": "absolute",
"overflow-y": "auto",
"overflow": "auto",
"height": "112px",
"top": "20px",
"right": "25px",
"left": "25px", }
for(var j in spanName){
myspan.style[j] = spanName[j];
}
box.appendChild(myspan);
button.innerHTML = "关闭";
//定义按钮样式
var btnName = {
border:"1px solid #ccc",
backgroundColor:"#fff",
width:"70px",
height:"30px",
textAlign:"center",
lineHeight:"30px",
"border-radius": "5px",
outline:"none",
position:"absolute",
bottom:"10px",
right:"20px", }
for(var j in btnName){
button.style[j] = btnName[j];
}
//把按钮添加到box中
box.appendChild(button);
//给按钮添加单击事件
button.addEventListener("click",function(){
box.style.display = "none";
})
}
alert('hahSDFDSFDDSFSDFSDFSDFSDFSDFSDFDSFFSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSa')
</script>
</body>
</html>
根据项目需求
（修改弹框样式）
(function() {
window.alert = function(name) {
$(".tip").css("display", "block")
$(".tip .content").html(name)
}
})()
调用：alert(name)
在页面中添加弹框元素，自定义其样式，默认隐藏
注：alert()方法重写，不能传多余参数
（仅去掉网址）
(function(){
window.alert = function(name){
var iframe = document.createElement("IFRAME");
iframe.style.display="none";
iframe.setAttribute("src", 'data:text/plain');
document.documentElement.appendChild(iframe);
window.frames[0].window.alert(name);
iframe.parentNode.removeChild(iframe);
}
})();
alert('试一试');
第三种方法（自定义样式哦~~）
Window.prototype.alert = function(){
//创建一个大盒子
var box = document.createElement("div");
//创建一个关闭按钮
var button = document.createElement("button");
//定义一个对象保存样式
var boxName = {
width:"500px",
height:"180px",
backgroundColor:"#f8f8f8",
border:"1px solid #ccc",
position:"absolute",
top:"50%",
left:"50%",
margin:"-90px 0 0 -250px",
zIndex:"999",
textAlign:"center",
lineHeight:"180px"
}
//给元素添加元素
for(var k in boxName){
box.style[k] = boxName[k];
}
//把创建的元素添加到body中
document.body.appendChild(box);
//把alert传入的内容添加到box中
if(arguments[0]){
box.innerHTML = arguments[0];
}
button.innerHTML = "关闭";
//定义按钮样式
var btnName = {
border:"1px solid #ccc",
backgroundColor:"#fff",
width:"70px",
height:"30px",
textAlign:"center",
lineHeight:"30px",
outline:"none",
position:"absolute",
bottom:"10px",
right:"20px",
}
for(var j in btnName){
button.style[j] = btnName[j];
}
//把按钮添加到box中
box.appendChild(button);
//给按钮添加单击事件
button.addEventListener("click",function(){
box.style.display = "none";
})
}
alert("我的好朋友JavaScript```")
自定义alert弹框，去掉IP以及端口号提示的更多相关文章
- JavaScript实现自定义alert弹框
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAh0AAAFkCAYAAACEpYlzAAAfj0lEQVR4nO3dC5BddZ0n8F93pxOQCO
- 自定义alert弹框，title不显示域名
问题: 系统默认的alert弹框的title会默认显示网页域名 解决办法: (修改弹框样式) (function() { window.alert = function(name) { $(" ...
- 自定义alert弹框，title不显示域名(重写alert)
问题: 系统默认的alert弹框的title会默认显示网页域名 解决办法: (修改弹框样式) (function() { window.alert = function(name) { $(" ...
- [转]自定义alert弹框，title不显示域名
//(仅去掉网址) (function(){ window.alert = function(name){ var iframe = document.createElement("IFRA ...
- h5弹框去掉ip地址
<script> window.alert = function(name){ var iframe = document.createElement("IFRAME" ...
- 自定义alert弹框
/**************** UIAlertControllerStyleAlert *************************/ /*创建一个 可以自定义文字颜色和字体大小的IAler ...
- CodePush自定义更新弹框及下载进度条
CodePush 热更新之自定义更新弹框及下载进度 先来几张弹框效果图 非强制更新场景 image 强制更新场景 image 更新包下载进度效果 image 核心代码 这里的热更新Modal框,是封装 ...
- selenium对Alert弹框的多种处理
Alert弹框是一个很烦人的控件,因为当前页面如果弹出了该弹框,你必须要处理它,不然你就不能操作页面的其它元素,下面我列出了alert弹框在多种场景下的处理办法. 明确知道系统哪个地方会弹alert ...
- python工具 - alert弹框输出姓名年龄、求和
使用python自带的tkinter库进行GUI编程,完成两个功能: (1)要求用户输入姓名和年龄然后打印出来 (2)要求用户输入一个数字,然后计算1到该数字之间的和 代码部分: # 导入tkinte ...
- 操作JavaScript的Alert弹框
@Testpublic void testHandleAlert(){ WebElement button =driver.findElement(By.xpath("input" ...
随机推荐
- wpf下的图片放大缩小
WPF下实现图片的放大缩小移动 在windows 7里面有自带的图片查看器,这个软件可以打开一张图片然后以鼠标在图片中的焦点为原点来进行缩放,并且放大后可以随意拖动.下面我们在WPF中实现这个功能 ...
- Nginx配置-1
1.绑定nginx到指定cpu [root@nginx conf.d]# vim /apps/nginx/conf/nginx.conf worker_processes 2; worker_cpu_ ...
- 使用 StringUtils.split 的坑
点赞再看,动力无限. 微信搜「程序猿阿朗 」. 本文 Github.com/niumoo/JavaNotes 和 未读代码博客 已经收录,有很多知识点和系列文章. 在日常的 Java 开发中,由于 J ...
- FastAPI + tortoise-orm基础使用
更改sqlite为mysql from tortoise import Tortoise import asyncio async def init(): user = 'root' password ...
- Django Admin save 重写 保存
在 django admin管理控制台中,用户按下"Save and add another",表单的字段值仍然填充最后插入的值 并且保存 在ModelAdmin中添加选项save ...
- 全球名校AI课程库（38）| 马萨诸塞大学 · 自然语言处理进阶课程『Advanced Natural Language Processing』
课程学习中心 | NLP课程合辑 | 课程主页 | 中英字幕视频 | 项目代码解析 课程介绍 自然语言处理 (NLP) 是一门关于如何教计算机理解人类语言的工程艺术和科学.NLP 作为一种人工智能技术 ...
- 2022，一个Java程序猿的装机配置
起因 工作一年,身边的老同学都在让我推荐适合他们需求的PC主机.于是仔细研究了一下当下的主机配置.成功试水并积攒了经验后,也给自己装了我的第一台PC主机. 主机配置 CPU:12700 主板:华硕TU ...
- Ubuntu定时执行python脚本
Crontab命令 命令选项: crontab -l : 显示某个用户的任务计划 crontab -e :编辑某个用户的任务计划 cron服务 service cron start/stop/rest ...
- 部署grafana+telegraf+influxdb 及 配置 jmeter后端监听
搞性能测试,可以搭建Grafana+Telegraf+InfluxDB 监控平台,监控服务器资源使用率.jmeter性能测试结果等. telegraf: 是一个用 Go 编写的代理程序,可收集系统和服 ...
- 执行xxx.sh脚本的两种方式
因公司测试环境的登录模式有2种,大佬们直接写了个脚本完成一键切换,看了其中的脚本文件,其中出现了send "sh out.sh\r":一直疑惑这里的sh out.sh的意思...查 ...