最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
手机网页上JS的弹出框实例源码
时间:2015-07-18 编辑:简简单单 来源:一聚教程网
在这里我们来一个获取验证码的页面来说明,也是在我项目用用到的一个页面。我们首先创建一个HTML的静态页面。其中代码如下:
自定义提示 css" rel="stylesheet" type="text/css" />
sAlter.js就是我们封装过后的js。我们先看看使用的效果:
来看看我们的页面js代码如下:
从上面的代码中我们看到这个封装的js使用起来非常简单 NewAlertBox("warning", "请输入11位手机号码", 3000);传入一些参数就可以达到我们要的效果。
核心代码
我们要的效果也达到了,sAlter.js这个里面究竟是个什么样子的,其中代码如下:
/* js弹窗代码:用户体验极佳的Alert提示效果 e-mail:616931@qq.com source:枫伶亿博客 */ var t; var argl,funcf; //获取指定ID的元素 function $xp(id) { return document.getElementById(id); } //通用事件获取接口 function getEvent() { if(CheckBrowser()=='IE') return window.event; func=getEvent.caller; while(func!=null) { var arg0 = func.arguments[0]; if(arg0) { if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)) { return arg0; } } func=func.caller; } return null; } //alert function NewAlertBox(itype,msg,time){//time为消失时间 var msgbg,msgcolor,bordercolor,content,posLeft,posTop,imgName; argl=arguments.length; if(argl>3) {funcf = arguments[3];}//外部方法 //弹出窗口设置 msgbg = "#FFF"; //内容背景 msgcolor = "#f66f15"; //内容颜色 bordercolor = "#d8bfd8"; //边框颜色 //遮罩背景设置 //判断图片类型 if(itype.toUpperCase()=='OK') //提示通过 imgName = '../Img/ts_ok.png'; else if(itype.toUpperCase()=='ERROR') //提示报错 imgName = '../Img/ts_error.png'; else //提示警告或者其他 imgName = '../Img/ts_warning.png'; content = "
" + msg; var sWidth,sHeight; if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) { sWidth = document.documentElement.clientWidth; sHeight = document.documentElement.clientHeight; } else { sWidth = screen.availWidth - 20;//防止溢出 if(screen.availHeight > document.body.scrollHeight){ sHeight = screen.availHeight; //少于一屏 }else{ sHeight = document.body.scrollHeight; //多于一屏 } } //创建遮罩背景 var maskObj = document.createElement("div"); maskObj.setAttribute('id','maskdiv'); //maskObj.setAttribute('onclick','CloseMsg()'); maskObj.style.position = "absolute"; maskObj.style.top = "0"; maskObj.style.left = "0"; maskObj.style.background = "#fff"; maskObj.style.filter = "Alpha(opacity=40);"; maskObj.style.opacity = "0.4"; maskObj.style.width = sWidth + "px"; maskObj.style.height = sHeight + "px"; maskObj.style.zIndex = "10000"; document.body.appendChild(maskObj); //创建弹出窗口 var msgObj = document.createElement("div") msgObj.setAttribute("id","msgdiv"); msgObj.setAttribute("onClick","CloseMsg()"); msgObj.style.position ="absolute"; sWidth = 230; sHeight = 180; msgObj.style.width = sWidth + "px"; //msgObj.style.height = sHeight + "px"; var event = getEvent();//申明event if(CheckBrowser()=='IE') { //posLeft = event.clientX + 10; //posTop = event.clientY + document.documentElement.scrollTop; posLeft = (document.documentElement.clientWidth - sWidth) / 2 + "px"; posTop = 50 + document.documentElement.scrollTop + "px"; //posTop = (document.documentElement.clientHeight- sHeight) / 2 + "px"; } else { //posLeft = event.pageX + 10 + "px";//ff下要申明px //posTop = event.pageY + 10 + "px"; posLeft = (document.documentElement.clientWidth - sWidth) / 2 + "px"; posTop = 50 + document.documentElement.scrollTop + "px"; //posTop = (document.documentElement.clientHeight- sHeight) / 2 + "px"; } msgObj.style.top = posTop; msgObj.style.left = posLeft; msgObj.style.fontSize = "18px"; msgObj.style.background = msgbg; msgObj.style.border = "1px solid " + bordercolor; msgObj.style.zIndex = "10001"; //创建内容 var bodyObj = document.createElement("div"); bodyObj.setAttribute("id","msgbody"); bodyObj.style.padding = "10px"; bodyObj.style.lineHeight = "1.5em"; bodyObj.style.color = msgcolor; bodyObj.style.textAlign = "center"; //var txt = document.createTextNode(content); //bodyObj.appendChild(txt); bodyObj.innerHTML = content; //生成窗口 document.body.appendChild(msgObj); $xp("msgdiv").appendChild(bodyObj); if(time != '') t=setTimeout("CloseMsg()",time); else t=setTimeout("CloseMsg()",3000);//默认三秒后自动消失 return false; } //移除对象 function CloseMsg(){ $xp("msgdiv").removeChild($xp("msgbody")); document.body.removeChild($xp("msgdiv")); document.body.removeChild($xp("maskdiv")); clearTimeout(t);//停止计时器 t = null; if(argl>3) {funcf();}//执行外部传入的函数 } //判断浏览器类型 function CheckBrowser(){ var cb = "Unknown"; if(window.ActiveXObject){ cb = "IE"; }else if(navigator.userAgent.toLowerCase().indexOf("firefox") != -1){ cb = "Firefox"; }else if((typeof document.implementation != "undefined") && (typeof document.implementation.createDocument != "undefined") && (typeof HTMLDocument != "undefined")){ cb = "Mozilla"; }else if(navigator.userAgent.toLowerCase().indexOf("opera") != -1){ cb = "Opera"; } return cb; }
另一JS弹出小窗口实例
弹出小窗口示例 点击弹出小窗口
-
上一个: jQuery 常用方法使用总结
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31