用js实现的自定义的对话框的实现代码(2)

var divHead = document.createElement("div");
if (title != undefined) {
divHead.innerHTML = title;
} else {
divHead.appendChild(document.createTextNode("消息"));
}
divHead.style.width = "100%";
divHead.style.height = "25px";
divHead.style.lineHeight = "25px";
divHead.style.fontSize = "14px";
divHead.style.fontWeight = "bold";
divHead.style.borderBottom = "1px outset #8989FF";
divHead.style.color = "white";
divHead.style.textIndent = "10px";
divHead.style.backgroundColor = "blue";
divHead.style.backgroundImage = "url('" + springweb_basePath + "/images/headbg.png')";
divHead.style.cursor = "move";
divHead.onmousedown = function() {
divDialog.dragging = true;
};
divHead.onmouseup = function() {
divDialog.dragging = false;
};
document.body.onmousemove = function(e) {
if (!divDialog.dragging) return;
e = e || window.event;
var mouseX, mouseY;
var mouseOffsetX, mouseOffsetY;
if (e.pageX || e.pageY) {
mouseX = e.pageX;
mouseY = e.pageY;
} else {
mouseX =
e.clientX + document.body.scrollLeft -
document.body.clientLeft;
mouseY =
e.clientY + document.body.scrollTop -
document.body.clientTop;
}
divDialog.style.left = (mouseX - dialogWidth * 0.4) + "px";
divDialog.style.top = (mouseY - 10) + "px";
};
divDialog.appendChild(divHead);

　　这里呢，有必要说一下的就是，鼠标按下和弹起事件，这里给div对象多增加了一个dragging的属性，用来代表对话框是否正在拖动中（这也是JS的特性之一，对object类型的对象指定新属性的一个方法：如果之前对象没有这个属性，只需通过对象名.属性名="值" 的方式，就可以为对象增加新属性）,在鼠标移动事件中，我们通过对象的dragging属性，来决定是否移动对话框，关于对话框的移动位置，这里我偷懒了～没有判断对话框和鼠标的相对位置，而是给了一个常量，这样每次开始拖动时，对话框会稍微"瞬移"一下，有兴趣的朋友可以帮忙完善一下，呵呵。
　　最后，是关于对话框内容区域的创建：

复制代码 代码如下:

var divContent = document.createElement("div");
divContent.style.textAlign = "center";
divContent.style.padding = "15px";
divContent.style.fontSize = "12px";
if (springweb_typeIsIE) {
divContent.style.height = parseInt(dialogHeight - 25) + "px";
} else {
divContent.style.height = parseInt(dialogHeight - 55) + "px";
}
divContent.style.backgroundColor = "#ffffff";
if (springweb_typeIsIE6 || springweb_typeIsIE7 || springweb_typeIsIE8) {
divContent.style.filter =
"progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#FFFFFF,endColorStr=#C2E2F8)";
} else if (springweb_typeIsFireFox) {
divContent.style.backgroundImage =
"-moz-linear-gradient(left,rgba(255,255,255,1),rgba(194,226,248,1))";
} else if (springweb_typeIsWebkit) {
divContent.style.backgroundImage =
"-webkit-gardient(linear,0% 0%,100% 100%,from(#FFFFFF),to(#000000))";
}
divContent.innerHTML = msg + "<br /><br />";
divDialog.appendChild(divContent);
var closeButton = document.createElement("img");
closeButton.style.cursor = "hand";
closeButton.setAttribute("src", springweb_basePath + "/images/okButton.png");
closeButton.setAttribute("alt", "确定");
//the click event when the dialog is closing.
closeButton.onclick = function() {
document.body.removeChild(divBackground);
document.body.removeChild(divDialog);
document.body.style.overflowY = "";
};
divContent.appendChild(closeButton);
divDialog.focus();
document.body.appendChild(divDialog);

　　这里应该不用多做解释了，稍微说一下，就是在13-22行的代码，这个是根据不同的浏览器来分别实现渐变效果，IE的话，用微软提供的渐变，Webkit或者Gecko内核的浏览器使用相应的CSS3标准也可以实现渐变效果。
　　最后嘛，这个方法支持大多数浏览器，个别浏览器如果不能完全支持，还请各位见谅，期待大家有更加完善的方法一起讨论，下面是一个示例，有兴趣的朋友可以看看。转载请注明出处～
示例文件：JS对话框实现

您可能感兴趣的文章: