自定义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" ...
随机推荐
- Windows下自动云备份思源笔记到Gitee
前言 思源笔记是一款本地笔记为主的软件,其目前提供了148元/year的付费同步功能,但对于21世纪中国难民而言还是太贵啦. 条件允许的同学还是使用官方的同步,支持下作者. 所以,就在思考有没有白嫖的 ...
- vue-axios 输入参数获取数据的写法
<template> <div class="nav"> <input v-model="name" type="tex ...
- Django Admin save 重写 保存
在 django admin管理控制台中,用户按下"Save and add another",表单的字段值仍然填充最后插入的值 并且保存 在ModelAdmin中添加选项save ...
- 你不知道的React Developer Tools，20 分钟带你掌握 9 个 React 组件调试技巧
壹 ❀ 引 React Developer Tools 是 React 官方推出的开发者插件,可以毫不夸张的说,它在我们日常组件开发中,对于组件属性以及文件定位,props 排查等等场景都扮演者至关重 ...
- or、and表达式
or 逻辑表达式 result = a or b 如果a为空则执行or后面的b,如果a不为空,则执行or前面的a 即:赋值运算中,如果or前面为真,就不会去执行or后面的,如果or前面为假才会执行or ...
- python 类相关 下划线相关 __init__
类 1.静态方法 class C(object): @staticmethod def f(): print('runoob'); C.f(); # 静态方法无需实例化 cobj = C() cobj ...
- SpringMVC&Maven进阶
3. SpringMVC 3.1 了解SpringMVC 概述 SpringMVC技术与Servlet技术功能等同,均属于web层开发技术 学习路线 请求与响应 REST分割 SSM整合 拦截器 目标 ...
- WPF之lognet4的基本使用
log4net是.Net下一个非常优秀的开源日志记录组件.log4net记录日志的功能非常强大.它可以将日志分不同的等级,以不同的格式,输出到不同的媒介.本文介绍lognet4的基本使用. 第一步:新 ...
- Halocn双目相机标定
[Halcon]Halcon双目标定 相机标定(4)---基于halcon的双目立体视觉标定 双目立体视觉:四(双目标定matlab,图像校正,图像匹配,计算视差,disparity详解,) 双目测距 ...
- 2022-11-06 Acwing每日一题
本系列所有题目均为Acwing课的内容,发表博客既是为了学习总结,加深自己的印象,同时也是为了以后回过头来看时,不会感叹虚度光阴罢了,因此如果出现错误,欢迎大家能够指出错误,我会认真改正的.同时也希望 ...