自定义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" ...
随机推荐
- 洛谷P5759题解
本文摘自本人洛谷博客,原文章地址:https://www.luogu.com.cn/blog/cjtb666anran/solution-p5759 \[这道题重在理解题意 \] 选手编号依次为: \ ...
- 支持JDK19虚拟线程的web框架，之二：完整开发一个支持虚拟线程的quarkus应用
欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 本篇是<支持JDK19虚拟线程的web ...
- 试试将.NET7编译为WASM并在Docker上运行
之前有听到说Docker支持Wasmtime了,刚好.NET7也支持WASM,就带大家来了解一下这个东西,顺便试试它怎么样. 因为WASM(WebAssembly) 一开始是一个给浏览器的技术,比起J ...
- （译）TDD(测试驱动开发)的5个步骤
原文:5 steps of test-driven development https://developer.ibm.com/articles/5-steps-of-test-driven-deve ...
- 推荐三个实用的 Go 开发工具
孙悟空在花果山称王的时候,特意去了一趟东海,在那里淘到了如意金箍棒.因为身为一个山大王,怎么能没有一件趁手的兵器呢? 作为程序员的我们也一样,除了我们的傍身武器 Ctrl C + V 之外,还要不停的 ...
- Go语言核心36讲14
在前几期文章中,我们分了几次,把Go语言自身提供的,所有集合类的数据类型都讲了一遍,额外还讲了标准库的container包中的几个类型. 在几乎所有主流的编程语言中,集合类的数据类型都是最常用和最重要 ...
- RabbitMQ个人实践
前言 MQ(Message Queue)就是消息队列,其有点有很多:解耦.异步.削峰等等,本文来聊一下RabbitMQ的一些概念以及使用. RabbitMq 案例 Springboot整合Rabbit ...
- fbterm的配置,纯文本终端显示中文
安装 fbterm sudo apt-get install fbterm 设置普通用户可以执行 fbterm 命令 sudo adduser username video #username为用户名 ...
- Vue2组件间通讯
Vue2组件通信的基础方式 自己的理解:组件化通信,无非就是数据你传我,我传你,两个组件的相互交流,方法很多,下方有图示(此篇建议小白阅读,大神的话也不会看,哈哈哈哈!仅供参考,有不同的意见可以一起交 ...
- 【翻译】rocksdb调试指引
rocksdb调试指引 翻译自官方wiki:https://github.com/facebook/rocksdb/wiki/RocksDB-Tuning-Guide 转载请注明出处:https:// ...