Js 订制自己的AlertBox(信息提示框)


Posted in Javascript onJanuary 09, 2009

本文制作一个用户自定义的AlertBox,效果如图:
Js 订制自己的AlertBox(信息提示框)
js文件中插入如下代码:

// JScript 文件 
// constants to define the title of the alert and button text. 
var ALERT_TITLE = "Oops!"; 
var ALERT_BUTTON_TEXT = "Close"; 
// over-ride the alert method only if this a newer browser. 
// Older browser will see standard alerts 
if(document.getElementById) { 
window.alert = function(txt) { 
createCustomAlert(txt); 
} 
} 
function createCustomAlert(txt) { 
// shortcut reference to the document object 
d = document; 
// if the modalContainer object already exists in the DOM, bail out. 
if(d.getElementById("modalContainer")) return; 
// create the modalContainer div as a child of the BODY element 
mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div")); 
mObj.id = "modalContainer"; 
// make sure its as tall as it needs to be to overlay all the content on the page 
mObj.style.height = document.documentElement.scrollHeight + "px"; 
// create the DIV that will be the alert 
alertObj = mObj.appendChild(d.createElement("div")); 
alertObj.id = "alertBox"; 
// MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert 
if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px"; 
// center the alert box 
alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px"; 
// create an H1 element as the title bar 
h1 = alertObj.appendChild(d.createElement("h1")); 
h1.appendChild(d.createTextNode(ALERT_TITLE)); 
// create a paragraph element to contain the txt argument 
msg = alertObj.appendChild(d.createElement("p")); 
msg.innerHTML = txt; 
// create an anchor element to use as the confirmation button. 
btn = alertObj.appendChild(d.createElement("a")); 
btn.id = "closeBtn"; 
btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT)); 
btn.href = "#"; 
// set up the onclick event to remove the alert when the anchor is clicked 
btn.onclick = function() { removeCustomAlert();return false; } 
// removes the custom alert from the DOM function removeCustomAlert() { 
// document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer")); 
} 
// removes the custom alert from the DOM 
function removeCustomAlert() 
{ 
document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer")); 
}

将如下代码粘贴到你的HTML你的HTML的HEAD部分。 
<script type="text/javascript" src="include/customAlertBox.js"></script> 
<!-- Paste this code into your external style sheet or the 
CSS section of your HTML document --> 
<style type="text/css"> 
#modalContainer { 
background-color:transparent; 
position:absolute; 
width:100%; 
height:100%; 
top:0px; 
left:0px; 
z-index:10000; 
} 
#alertBox { 
position:relative; 
width:300px; 
min-height:100px; 
margin-top:50px; 
border:2px solid #000; 
background-color:#F2F5F6; 
background-image:url(alert.png); 
background-repeat:no-repeat; 
background-position:20px 30px; 
} 
#modalContainer > #alertBox { 
position:fixed; 
} 
#alertBox h1 { 
margin:0; 
font:bold 0.9em verdana,arial; 
background-color:#78919B; 
color:#FFF; 
border-bottom:1px solid #000; 
padding:2px 0 2px 5px; 
} 
#alertBox p { 
font:0.7em verdana,arial; 
height:50px; 
padding-left:5px; 
margin-left:55px; 
} 
#alertBox #closeBtn { 
display:block; 
position:relative; 
margin:5px auto; 
padding:3px; 
border:1px solid #000; 
width:70px; 
font:0.7em verdana,arial; 
text-transform:uppercase; 
text-align:center; 
color:#FFF; 
background-color:#78919B; 
text-decoration:none; 
} 
</style>

在你的HTML文档的Body部分插入如下代码:
<input type="button" value = "Test the alert" onclick="alert('This is a custom alert dialog that was created by overriding the window.alert method.');">

Javascript 相关文章推荐
第七章之菜单按钮图标组件
Apr 25 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 Javascript
通用JS事件写法实现代码
Jan 07 #Javascript
javascript 表单的友好用户体现
Jan 07 #Javascript
JavaScript Prototype对象
Jan 07 #Javascript
开发跨浏览器javascript常见注意事项
Jan 01 #Javascript
用于判断用户注册时,密码强度的JS代码
Jan 01 #Javascript
很全的显示阴历(农历)日期的js代码
Jan 01 #Javascript
js继承 Base类的源码解析
Dec 30 #Javascript
You might like
thinkphp分页实现效果
2016/10/13 PHP
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
使用Vue实现简单计算器
2020/02/25 Javascript
浅谈Python NLP入门教程
2017/12/25 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
python安装twisted的问题解析
2018/08/21 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
Python将字典转换为XML的方法
2020/08/01 Python
python中的测试框架
2020/11/13 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
什么是serialVersionUID
2016/03/04 面试题
what is the difference between ext2 and ext3
2015/08/25 面试题
行政主管岗位职责
2013/11/18 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
丧事主持词大全
2014/04/02 职场文书
某某同志考察材料
2014/05/28 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
借钱欠条怎么写
2015/07/03 职场文书
2015大一新生军训感言
2015/08/01 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript