欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JavaScript:重写window alert的弹出窗口

程序员文章站 2022-06-14 10:24:02
...

alert弹出窗口大小及窗口上的文字大小无法调整,上课时学生无法看清,因此重写了alert方法。

window.alert=function (msg){
	//创建弹出窗口(用DIV),窗口上的内容包括一个显示文本字符串的容器和一个按钮
    var box=document.createElement('div');
	var msgbox=document.createElement('div');
	box.appendChild(msgbox);
	var btn=document.createElement('button');
	box.appendChild(btn);
	document.body.appendChild(box);
	box.id='a1';
    
    //设置弹出窗口的显示样式
	box.style.cssText="border:1px solid gray;width:500px;height:200px;padding:10px;z-index=100;background:white;";
    
    //设置弹出窗口的位置
	box.style.position="absolute";
	box.style.top='25%';
	box.style.left='25%';
    
    //设置弹出窗口上的文本内容及其样式
	msgbox.style.cssText="height:100px;padding:10px;";
	msgbox.innerHTML=msg;

    //设置按钮
	btn.innerHTML="确定";
	btn.style.cssText="margin-left:400px;";

    //给按钮绑定单击事件
	btn.onclick=function (){
		document.body.removeChild(box);//点击确定按钮后让alert窗口消失
	}
}