js重写alert样式
2016-06-03 16:52
453 查看
window.alert = function(txt) { var winSize = function(){ var xScroll, yScroll, windowWidth, windowHeight, pageWidth, pageHeight; // innerHeight获取的是可视窗口的高度,IE不支持此属性 if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } if (self.innerHeight) { // all except Explorer windowWidth = self.innerWidth; windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if (yScroll < windowHeight) { pageHeight = windowHeight; } else { pageHeight = yScroll; } // for small pages with total width less then width of the viewport if (xScroll < windowWidth) { pageWidth = windowWidth; } else { pageWidth = xScroll; } return{ 'pageWidth':pageWidth, 'pageHeight':pageHeight, 'windowWidth':windowWidth, 'windowHeight':windowHeight } }(); var shield = document.createElement("DIV"); shield.id = "shield"; shield.style.position = "absolute"; shield.style.left = "0px"; shield.style.top = "0px"; shield.style.width = winSize.pageWidth+"px"; shield.style.height = document.body.scrollHeight+"px"; shield.style.background = "rgba(51,51,51,0.6)"; shield.style.textAlign = "center"; shield.style.zIndex = "10000"; shield.style.filter = "alpha(opacity=0)"; var alertFram = document.createElement("DIV"); alertFram.id="alertFram"; alertFram.style.position = "fixed"; alertFram.style.left = "15%"; alertFram.style.top = (winSize.windowHeight / 2 - 150)+"px"; alertFram.style.width = "70%"; alertFram.style.height = "150px"; alertFram.style.background = "#ccc"; alertFram.style.textAlign = "center"; alertFram.style.lineHeight = "150px"; alertFram.style.zIndex = "10001"; strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n"; strHtml += " <li style=\"background:#fff;text-align:left;padding-left:10px;font-size:14px;height:25px;line-height:25px;border-bottom:1px solid #ff6a01;\">[系统提示]</li>\n"; strHtml += " <li style=\"background:#fff;text-align:center;font-size:14px;height:120px;line-height:120px;\">"+txt+"</li>\n"; strHtml += " <li style=\"background:#fff;text-align:center;font-weight:bold;height:28px;line-height:28px; border-top:1px solid #ff6a01;\"><input style=\"background:#fff;color:#000;font-size:14px;height:27px;line-height:27px;\" type=\"button\" value=\"确 定\" onclick=\"doOk()\" /></li>\n"; strHtml += "</ul>\n"; alertFram.innerHTML = strHtml; document.body.appendChild(alertFram); document.body.appendChild(shield); var c = 0; this.doAlpha = function(){ if (c++ > 20){clearInterval(ad);return 0;} shield.style.filter = "alpha(opacity="+c+");"; } var ad = setInterval("doAlpha()",5); this.doOk = function(){ alertFram.style.display = "none"; shield.style.display = "none"; } alertFram.focus(); document.body.onselectstart = function(){return false;}; }
相关文章推荐
- 很不错的CSS样式
- CSS list-style 属性
- textarea无边框文本透明背景文本样式
- 当我们在使用CSS的时候ID与Class有何不同?
- POI 设置Excel样式(转)
- CSS3制作漂亮的照片墙
- css+div
- css实现简单的水平垂直居中
- CSS样式学习笔记
- 总结一些每次写都要百度的样式 and so on
- css实现div高度填满整个空间
- CSS visibility 属性
- web响应式布局一些基本css 持续更新
- CSS3的REM设置字体大小
- CSS中的Position属性 overflow 属性
- CSS实现单行、多行文本溢出显示省略号(…)
- 来来来,看看别人的CSS样式重置表
- CSS3的nth-child选择器
- CSS传送门
- 浅说css的绝对定位跟相对定位