本文制作一个用户自定义的AlertBox,效果如图:
js文件中插入如下代码:
将如下代码粘贴到你的HTML你的HTML的HEAD部分。
在你的HTML文档的Body部分插入如下代码:
原码地址:http://javascript.internet.com/miscellaneous/custom-alert-box.html
js文件中插入如下代码:
- //JScript文件
- //constantstodefinethetitleofthealertandbuttontext.
- varALERT_TITLE="Oops!";
- varALERT_BUTTON_TEXT="Close";
- //over-ridethealertmethodonlyifthisanewerbrowser.
- //Olderbrowserwillseestandardalerts
- if(document.getElementById){
- window.alert=function(txt){
- createCustomAlert(txt);
- }
- }
- functioncreateCustomAlert(txt){
- //shortcutreferencetothedocumentobject
- d=document;
- //ifthemodalContainerobjectalreadyexistsintheDOM,bailout.
- if(d.getElementById("modalContainer"))return;
- //createthemodalContainerdivasachildoftheBODYelement
- mObj=d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
- mObj.id="modalContainer";
- //makesureitsastallasitneedstobetooverlayallthecontentonthepage
- mObj.style.height=document.documentElement.scrollHeight+"px";
- //createtheDIVthatwillbethealert
- alertObj=mObj.appendChild(d.createElement("div"));
- alertObj.id="alertBox";
- //MSIEdoesnttreatposition:fixedcorrectly,sothiscompensatesforpositioningthealert
- if(d.all&&!window.opera)alertObj.style.top=document.documentElement.scrollTop+"px";
- //centerthealertbox
- alertObj.style.left=(d.documentElement.scrollWidth-alertObj.offsetWidth)/2+"px";
- //createanH1elementasthetitlebar
- h1=alertObj.appendChild(d.createElement("h1"));
- h1.appendChild(d.createTextNode(ALERT_TITLE));
- //createaparagraphelementtocontainthetxtargument
- msg=alertObj.appendChild(d.createElement("p"));
- msg.innerHTML=txt;
- //createananchorelementtouseastheconfirmationbutton.
- btn=alertObj.appendChild(d.createElement("a"));
- btn.id="closeBtn";
- btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
- btn.href="#";
- //setuptheonclickeventtoremovethealertwhentheanchorisclicked
- btn.οnclick=function(){removeCustomAlert();returnfalse;}
- //removesthecustomalertfromtheDOMfunctionremoveCustomAlert(){
- //document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
- }
- //removesthecustomalertfromtheDOM
- functionremoveCustomAlert()
- {
- document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
- }
将如下代码粘贴到你的HTML你的HTML的HEAD部分。
- <scripttype="text/javascript"src="include/customAlertBox.js"></script>
- <!--Pastethiscodeintoyourexternalstylesheetorthe
- CSSsectionofyourHTMLdocument-->
- <styletype="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:2pxsolid#000;
- background-color:#F2F5F6;
- background-image:url(alert.png);
- background-repeat:no-repeat;
- background-position:20px30px;
- }
- #modalContainer>#alertBox{
- position:fixed;
- }
- #alertBoxh1{
- margin:0;
- font:bold0.9emverdana,arial;
- background-color:#78919B;
- color:#FFF;
- border-bottom:1pxsolid#000;
- padding:2px02px5px;
- }
- #alertBoxp{
- font:0.7emverdana,arial;
- height:50px;
- padding-left:5px;
- margin-left:55px;
- }
- #alertBox#closeBtn{
- display:block;
- position:relative;
- margin:5pxauto;
- padding:3px;
- border:1pxsolid#000;
- width:70px;
- font:0.7emverdana,arial;
- text-transform:uppercase;
- text-align:center;
- color:#FFF;
- background-color:#78919B;
- text-decoration:none;
- }
- </style>
- <inputtype="button"value="Testthealert"onclick="alert('Thisisacustomalertdialogthatwascreatedbyoverridingthewindow.alertmethod.');">