手机版

Js定制自己的AlertBox

时间:2021-10-27 来源:互联网 编辑:宝哥软件园 浏览:

本文制作了一个用户自定义的AlertBox,效果如图:  所示。

射流研究…文件中插入如下代码:复制代码代码如下://JScript文件//常量,用于定义警报和按钮文本的标题var ALERT _ TITLE='哎呀!';var ALERT_BUTTON_TEXT='关闭;//仅当这是一个较新的浏览器时,才跳过警报方法。//如果(文档。getelementbyid){ window。alert=function(txt){ createCustomAlert(txt),较旧的浏览器将看到标准警报;} }函数createCustomAlert(txt) { //对文档对象d=文档的快捷引用;//如果modalContainer对象已经存在于数字正射影像图中,请退出if(d . getelementbyid(' ModalContainer ')返回;//将modalContainer分区创建为身体元素mObj=d . getelementsbytagname(' BOdy ')[0]的子元素appendChild(d . CreateElement(' div '));mObj.id=' modalContainer//确保它有需要的高度以覆盖页面上的所有内容莫比。风格。高度=文档。文档元素。滚动高度' px;//创建将成为警报的DIV alertObj=mobj。appendchild(d . create元素(' DIV '));alertObj.id=' alertBox//MSIE没有正确处理位置:固定,所以这补偿了定位警报如果(d.all!窗户。歌剧)alertobj。风格。top=文档。文档元素。滚动顶部' px;//将警报框alertobj。风格。left=(d .文档元素。scrollwidth-alertobj。offsetwithts)/2 ' px ';//创建一个氕元素作为标题栏h1=alertobj。append child(d . create element(' h1 '));h1。append child(d . createtextnode(ALTER _ TItle));//创建一个段落元素来包含文本文件(textfile)参数msg=alertobj。appendchild(d . create元素(' p '));msg.innerHTML=txt//创建一个锚点元素,用作确认按钮BTN=alertobj。appendchild(d . create元素(' a '));btn.id=' closeBtnBTN。append child(d . createTextnode(ALTER _ BUTTON _ TExT));btn.href=' #//设置单击事件事件,在点击锚点时移除提醒BTN。onclick=function(){ removeCustomAlert();返回false} //从数字正射影像图函数removeCustomAlert(){//文档。getelementsbytagname(' body ')[0]中移除自定义警报移除子文档。getelementbyid(' ModalContainer ');} //从数字正射影像图函数removeCustomAlert(){文档。getelementsbytagname(' body ')[0]中移除自定义警报移除子文档。getelementbyid(' ModalContainer ');} 将如下代码粘贴到你的超文本标记语言你的超文本标记语言的头部分。复制代码代码如下:脚本类型=' text/JavaScript ' src=' http : include/customalertbox。js '/脚本!-将此代码粘贴到您的外部样式表或超文本标记语言文档的半铸钢钢性铸铁(Cast Semi-Steel)部分-样式类型=' text/CSS ' # modalContainer {底色:透明;位置:绝对;宽度:100%;高度:100%;top:0pxleft:0pxz指数:10000;} # alertBox {位置:相对;宽度宽度:300像素最小高度:100 px页边距-顶部:50像素;border:2px固体# 000;背景-彩色: # F2F 5 F6;背景-图像: URL(警报。巴布亚新几内亚);背景-重复:不重复;背景-位置:20 px 30px} # modalContainer # alertBox {位置:固定;} # alertBox h1 { margin :0 font : bold 0.9em verdana,arial背景色-: # 78919 B;颜色: # FFF;边框-底部:1px实心# 000;padd :2 px 0 2px 5px } # AlertBox p { font :0.7 em verdana,arial高度:50 px左衬垫:5 px左边距left :55 px } # alertBox # closeBtn { display : block;位置:相对;margin:5px汽车;padd :3 pxborder 33601 px固体# 000;宽度:70 pxfont:0.7em verdana,arialtext-transform :大写;文本对齐:居中;颜色: # FFF;背景色-: # 78919 B;文本装饰:无;}/样式在你的超文本标记语言文档的身体部分插入如下代码: 复制代码代码如下:输入类型="按钮"值="测试警报" onclick="警报"(这是一个自定义警报对话框,是通过重写窗口.警报方法创建的。');'

版权声明:Js定制自己的AlertBox是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。