自定义弹窗Style样式
Posted 流水乄心
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自定义弹窗Style样式相关的知识，希望对你有一定的参考价值。
由于系统默认alert弹出窗口不能自定义样式，有可能不符合网站的风格，虽然网上应该有很多这样的JS
但是还是自己写的比较放心，顺便练习一下对DOM的操作
支持IE6下的SELECT不能遮罩的问题，谷歌支持圆角，IE6下就比较丑了，四四方方的，不过可以自定义自己喜欢的样式
听取建议后，修改了position:fixed, IE6下用hack处理了。
点击看效果:
所需CSS：
<style type="text/css">
#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(images/gray_btn.png) 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(images/gray_btn.png) no-repeat right top;
font-style: normal;
}
</style>
使用方法，直接调用函数，传递所需定义的信息，支持定义是否有取消键：
alertMsg(msg, mode) //mode为空，即只有一个确认按钮，mode为1时有确认和取消两个按钮
函数代码：添加了一个获取窗口尺寸的函数，又长长了很多，可以把获取窗口的尺寸另外立一个函数放公共库里面，这里只是为了方便演示，写到一个函数里面
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 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
}
}();
//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;"; //遮罩层DIV
var shadowDiv = document.createElement(\'div\'); //添加阴影DIV
shadowDiv.style.cssText = styleStr; //添加样式
shadowDiv.id = "shadowDiv";
//如果是IE6则创建IFRAME遮罩SELECT
if (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);
}
以上是关于自定义弹窗Style样式的主要内容，如果未能解决你的问题，请参考以下文章
Android自定义半透明背景弹窗非popwindow/dialog超简单任意编写！