自定义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" ...
随机推荐
- AgileBoot - 如何集成内置数据库H2和内置Redis
本项目地址: github: https://github.com/valarchie/AgileBoot-Back-End gitee: https://gitee.com/valarchie/Ag ...
- SpringBoot 常用注解的原理和使用
@AutoConfiguration 读取所有jar包下的 /META-INF/spring.factories 并追加到一个 LinkedMultiValueMap 中.每一个url中记录的文件路径 ...
- 接入监控视频，为啥还需要对接厂商的SDK呢，不是有onvif这样的标准协议吗？
不少人问过我这个问题,这真是一个好问题. 我举两个例子,让您仔细品: ① 快速打开视频和极致操控的问题. onvif协议很科班,但厂商的sdk可能会给你一些独特的方法,譬如先make一个I帧,这样第一 ...
- zk系列二：zookeeper实战之分布式统一配置获取
前面介绍了zk的一些基础知识,这篇文章主要介绍下如何在java环境下获取zk的配置信息:主要基于zk的监听器以及回调函数通过响应式编程的思想将核心代码糅合成一个工具类,几乎做到了拿来即用: 在分布式集 ...
- RK3568开发笔记（五）：在虚拟机上使用SDK编译制作uboot、kernel和ubuntu镜像
前言 buildroot虽然灵活,但是基于实际情况,本身是侧重驱动和应用定制开发的只定制一次文件系统投入有点多,还不如直接ubunt自己交叉编译依赖库,做一些库的移植裁剪. 于是本篇就使用ubu ...
- java反序列化漏洞cc_link_one
CC-LINK-one 前言 这里也正式进入的java的反序列化漏洞了,简单介绍一下CC是什么借用一些官方的解释:Apache Commons是Apache软件基金会的项目,曾经隶属于Jakarta项 ...
- SolidEdge ST8安装教程
SolidEdge ST8安装教程: 1.使用百度云客户端下载Solidedge ST8软件安装包,打开软件安装文件夹: 2.选择.ISO安装文件,打开.ISO安装文件,可以解压或使用虚拟光驱加载: ...
- leetcode学习记录2.13
[13] 罗马数字转整数 import java.util.HashMap; import java.util.Map; /* * * [13] 罗马数字转整数 * * https://leetcod ...
- 第2-3-5章 删除附件的接口开发-文件存储服务系统-nginx/fastDFS/minio/阿里云oss/七牛云oss
目录 5.4 接口开发-根据id删除附件 5.4.1 接口文档 5.4.2 代码实现 5.4.3 接口测试 5.4.4 测试ALI和FAST_DFS以及MINIO上传和删除的接口 5.4.4.1 阿里 ...
- windows server2016/2019在vmware上安装失败
问题:无法进入装机界面 现象一:打开虚拟机后进入虚拟bios界面,无法引导iso镜像 解决方法1:从虚拟机设置里,修改引导选项,如果需要修改启动盘则设置强制执行BIOS设置 下图为vsphere的截图 ...