[JS]JS模拟Alert弹出框效果--自定义CSS样式

function alertMsg(msg, mode) { //mode为空，即只有一个确认按钮，mode为1时有确认和取消两个按钮msg = msg || '';mode = mode || 0;var top = document.body.scrollTop || document.documentElement.scrollTop;var isIe = (document.all) ? true : false;var isIE6 = isIe && !window.XMLHttpRequest;var sTop = document.documentElement.scrollTop || document.body.scrollTop;var sLeft = document.documentElement.scrollLeft || document.body.scrollLeft;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 MacxScroll = document.body.scrollWidth;yScroll = document.body.scrollHeight;} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and SafarixScroll = document.body.offsetWidth;yScroll = document.body.offsetHeight;}if (self.innerHeight) { // all except ExplorerwindowWidth = self.innerWidth;windowHeight = self.innerHeight;} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict ModewindowWidth = document.documentElement.clientWidth;windowHeight = document.documentElement.clientHeight;} else if (document.body) { // other ExplorerswindowWidth = document.body.clientWidth;windowHeight = document.body.clientHeight;}// for small pages with total height less then height of the viewportif (yScroll < windowHeight) {pageHeight = windowHeight;} else {pageHeight = yScroll;}// for small pages with total width less then width of the viewportif (xScroll < windowWidth) {pageWidth = windowWidth;} else {pageWidth = xScroll;}return{'pageWidth':pageWidth,'pageHeight':pageHeight,'windowWidth':windowWidth,'windowHeight':windowHeight}}();//alert(winSize.pageWidth);//遮罩层var styleStr = 'top:0;left:0;position:absolute;z-index:10000;background:#666;width:' + winSize.pageWidth + 'px;height:' + (winSize.pageHeight + 30) + 'px;';styleStr += (isIe) ? "filter:alpha(opacity=80);" : "opacity:0.8;"; //遮罩层DIVvar shadowDiv = document.createElement('div'); //添加阴影DIVshadowDiv.style.cssText = styleStr; //添加样式shadowDiv.id = "shadowDiv";//如果是IE6则创建IFRAME遮罩SELECTif (isIE6) {var maskIframe = document.createElement('iframe');maskIframe.style.cssText = 'width:' + winSize.pageWidth + 'px;height:' + (winSize.pageHeight + 30) + 'px;position:absolute;visibility:inherit;z-index:-1;filter:alpha(opacity=0);';maskIframe.frameborder = 0;maskIframe.src = "about:blank";shadowDiv.appendChild(maskIframe);}document.body.insertBefore(shadowDiv, document.body.firstChild); //遮罩层加入文档//弹出框var styleStr1 = 'display:block;position:fixed;_position:absolute;left:' + (winSize.windowWidth / 2 - 200) + 'px;top:' + (winSize.windowHeight / 2 - 150) + 'px;_top:' + (winSize.windowHeight / 2 + top - 150)+ 'px;'; //弹出框的位置var alertBox = document.createElement('div');alertBox.id = 'alertMsg';alertBox.style.cssText = styleStr1;//创建弹出框里面的内容P标签var alertMsg_info = document.createElement('P');alertMsg_info.id = 'alertMsg_info';alertMsg_info.innerHTML = msg;alertBox.appendChild(alertMsg_info);//创建按钮var btn1 = document.createElement('a');btn1.id = 'alertMsg_btn1';btn1.href = 'javas' + 'cript:void(0)';btn1.innerHTML = '<cite>确定</cite>';btn1.onclick = function () {document.body.removeChild(alertBox);document.body.removeChild(shadowDiv);return true;};alertBox.appendChild(btn1);if (mode === 1) {var btn2 = document.createElement('a');btn2.id = 'alertMsg_btn2';btn2.href = 'javas' + 'cript:void(0)';btn2.innerHTML = '<cite>取消</cite>';btn2.onclick = function () {document.body.removeChild(alertBox);document.body.removeChild(shadowDiv);return false;};alertBox.appendChild(btn2);}document.body.appendChild(alertBox);}

#alertMsg {display: none;width: 400px;border: 1px solid #ddd;border-radius: 5px;box-shadow: 1px 1px 10px black;padding: 10px;font-size: 12px;position: absolute;text-align: center;background: #fff;z-index: 100000;}#alertMsg_info {padding: 2px 15px;line-height: 1.6em;text-align: left;}#alertMsg_btn1, #alertMsg_btn2 {display: inline-block;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJwAAAA1CAMAAACDdXJZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADZQTFRF9vb22dnZ6Ojo4uLi5OTk7Ozs1tbW3t7e5ubm7+/v8PDwh4eHqqqqwsLCpqam+fn56urq9/f3ytDYYwAAABJ0Uk5T//8A4r+/EgAAAJlJREFUeNrs10EKgCAURdFfaZlW1v43m86aa3CRd1dwEMGnndwOOy1TK7gcqVXcjsZRw+M8NeGGxd3UKm6mJtywONe30K0fcP2quIUa/uTQuECt4Dz4bT3A2QNOOOGE++IubsmuaNQKzrBjU7gWHHaVVBx2z+Fx2D+EcC24jRoeN6Fx1IRrwa3UhGvBke+cA6+SBA79b30FGADMK+kbDduXzAAAAABJRU5ErkJggg==) no-repeat left top;padding-left: 3px;color: #000000;font-size: 12px;text-decoration: none;margin-right: 10px;cursor: pointer;}#alertMsg_btn1 cite, #alertMsg_btn2 cite {line-height: 24px;display: inline-block;padding: 0 13px 0 10px;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJwAAAA1CAMAAACDdXJZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADZQTFRF9vb22dnZ6Ojo4uLi5OTk7Ozs1tbW3t7e5ubm7+/v8PDwh4eHqqqqwsLCpqam+fn56urq9/f3ytDYYwAAABJ0Uk5T//8A4r+/EgAAAJlJREFUeNrs10EKgCAURdFfaZlW1v43m86aa3CRd1dwEMGnndwOOy1TK7gcqVXcjsZRw+M8NeGGxd3UKm6mJtywONe30K0fcP2quIUa/uTQuECt4Dz4bT3A2QNOOOGE++IubsmuaNQKzrBjU7gWHHaVVBx2z+Fx2D+EcC24jRoeN6Fx1IRrwa3UhGvBke+cA6+SBA79b30FGADMK+kbDduXzAAAAABJRU5ErkJggg==) no-repeat right top;font-style: normal;}

8月14日 03：35更新：

Promise版本：

function alertMsg(msg, mode) { //mode为空，即只有一个确认按钮，mode为1时有确认和取消两个按钮return new Promise(function(resolve) {msg = msg || '';mode = mode || 0;var top = document.body.scrollTop || document.documentElement.scrollTop;var isIe = (document.all) ? true : false;var isIE6 = isIe && !window.XMLHttpRequest;var sTop = document.documentElement.scrollTop || document.body.scrollTop;var sLeft = document.documentElement.scrollLeft || document.body.scrollLeft;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 MacxScroll = document.body.scrollWidth;yScroll = document.body.scrollHeight;} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and SafarixScroll = document.body.offsetWidth;yScroll = document.body.offsetHeight;}if (self.innerHeight) { // all except ExplorerwindowWidth = self.innerWidth;windowHeight = self.innerHeight;} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict ModewindowWidth = document.documentElement.clientWidth;windowHeight = document.documentElement.clientHeight;} else if (document.body) { // other ExplorerswindowWidth = document.body.clientWidth;windowHeight = document.body.clientHeight;}// for small pages with total height less then height of the viewportif (yScroll < windowHeight) {pageHeight = windowHeight;} else {pageHeight = yScroll;}// for small pages with total width less then width of the viewportif (xScroll < windowWidth) {pageWidth = windowWidth;} else {pageWidth = xScroll;}return{'pageWidth':pageWidth,'pageHeight':pageHeight,'windowWidth':windowWidth,'windowHeight':windowHeight}}();//alert(winSize.pageWidth);//遮罩层var styleStr = 'top:0;left:0;position:absolute;z-index:10000;background:#666;width:' + winSize.pageWidth + 'px;height:' + (winSize.pageHeight + 30) + 'px;';styleStr += (isIe) ? "filter:alpha(opacity=80);" : "opacity:0.8;"; //遮罩层DIVvar shadowDiv = document.createElement('div'); //添加阴影DIVshadowDiv.style.cssText = styleStr; //添加样式shadowDiv.id = "shadowDiv";//如果是IE6则创建IFRAME遮罩SELECTif (isIE6) {var maskIframe = document.createElement('iframe');maskIframe.style.cssText = 'width:' + winSize.pageWidth + 'px;height:' + (winSize.pageHeight + 30) + 'px;position:absolute;visibility:inherit;z-index:-1;filter:alpha(opacity=0);';maskIframe.frameborder = 0;maskIframe.src = "about:blank";shadowDiv.appendChild(maskIframe);}document.body.insertBefore(shadowDiv, document.body.firstChild); //遮罩层加入文档//弹出框var styleStr1 = 'display:block;position:fixed;_position:absolute;left:' + (winSize.windowWidth / 2 - 200) + 'px;top:' + (winSize.windowHeight / 2 - 150) + 'px;_top:' + (winSize.windowHeight / 2 + top - 150)+ 'px;'; //弹出框的位置var alertBox = document.createElement('div');alertBox.id = 'alertMsg';alertBox.style.cssText = styleStr1;//创建弹出框里面的内容P标签var alertMsg_info = document.createElement('P');alertMsg_info.id = 'alertMsg_info';alertMsg_info.innerHTML = msg;alertBox.appendChild(alertMsg_info);//创建按钮var btn1 = document.createElement('a');btn1.id = 'alertMsg_btn1';btn1.href = 'javas' + 'cript:void(0)';btn1.innerHTML = '<cite>确定</cite>';btn1.onclick = function () {document.body.removeChild(alertBox);document.body.removeChild(shadowDiv);resolve(); return true;};alertBox.appendChild(btn1);if (mode === 1) {var btn2 = document.createElement('a');btn2.id = 'alertMsg_btn2';btn2.href = 'javas' + 'cript:void(0)';btn2.innerHTML = '<cite>取消</cite>';btn2.onclick = function () {document.body.removeChild(alertBox);document.body.removeChild(shadowDiv);rejected();return false;};alertBox.appendChild(btn2);}document.body.appendChild(alertBox);})}

原文