http://www.cnblogs.com/Charles2008/archive/2008/04/18/1158012.html
JS部分
var oldTop=0,oldLeft=0;
var oldEventX = 0,oldEventY = 0;
var ShadeArea;
var WinArea;
var canmove=false;
var hover='#000000',normal='#000000';
function BeginDrag(obj){
if(event.button==1)
{
WinArea = obj.parentNode;
ShadeArea = WinArea.nextSibling;
obj.setCapture();
oldEventX = event.clientX;
oldEventY = event.clientY;
oldLeft = parseInt(WinArea.style.left);
oldTop = parseInt(WinArea.style.top);
ShadeArea.style.width = WinArea.offsetWidth;
ShadeArea.style.height = WinArea.offsetHeight;
ShadeArea.style.display = "";
ShadeArea.style.left = oldLeft +5;
ShadeArea.style.top = oldTop + 5;
ShadeArea.style.backgroundColor = normal;
ShadeArea.style.filter = "alpha(opacity=40)";
canmove = true;
}
}
function EndDrag(obj){
if(canmove)
{
ShadeArea.style.display = "none";
ShadeArea.style.left = oldLeft;
ShadeArea.style.top = oldTop;
obj.releaseCapture();
canmove = false;
}
}
function Draging(obj){
if(canmove){
WinArea.style.left = oldLeft + event.clientX - oldEventX;
WinArea.style.top = oldTop + event.clientY - oldEventY;
ShadeArea.style.left = parseInt(WinArea.style.left) + 5;
ShadeArea.style.top = parseInt(WinArea.style.top) + 5;
}
}
var isAlertDivBuilded = false;
function BuildAlertDiv(){
var strAlert = "";
strAlert += "<div id='AlertDiv' style='position:absolute;display:none;z-index:1002; display:none;'>";
strAlert +=" <div class='message_width' onmousedown='BeginDrag(this)' onmouseup='EndDrag(this)' onmousemove='Draging(this)'>";
strAlert +=" <table class='message_title'>";
strAlert +=" <tr>";
strAlert +=" <td><div class='message_div'>Information</div>";
strAlert +=" <div class='message_close'><a href='#'><img id='closeButton' style='cursor:pointer;' src='http://www.cnblogs.com/images/cnblogs_com/charles2008/close.gif' alt='Close' title='Close' width='40' height='40' /></a></div></td>";
strAlert +=" </tr>";
strAlert +=" </table>";
strAlert +=" </div>";
strAlert +=" <div class='message_width'>";
strAlert +=" <table class='message_contain' cellpadding='0' cellspacing='0'>";
strAlert +=" <tr>";
strAlert +=" <td colspan='2' height='25'> </td>";
strAlert +=" </tr>";
strAlert +=" <tr>";
strAlert +=" <td class='message_leftcontain'><img src='http://www.cnblogs.com/images/cnblogs_com/charles2008/information.gif' alt='Information' title='Information' width='40' height='40' /></td>";
strAlert +=" <td class='message_rightcontain'><div id='alertMessageDiv'>";
strAlert +=" </div>";
strAlert +=" </tr>";
strAlert +=" <tr>";
strAlert +=" <td colspan='2' height='35'> </td>";
strAlert +=" </tr>";
strAlert +=" <tr>";
strAlert +=" <td colspan='2' class='message_button'><input id='alertButton' class='button_short' type='button' name='btnOk' value='OK'/></td>";
strAlert +=" </tr>";
strAlert +=" </table>";
strAlert +=" </div>";
strAlert +="</div>";
strAlert +="<div style='position:absolute; z-index:1001; display:none;'></div>";
document.body.insertAdjacentHTML("afterBegin",strAlert);
isAlertDivBuilded = true;
}
(function(){
SelectsFactory = {
get_Instance:function(){
if(Selects.instance == null){
return new Selects();
}
else{
return Selects.instance;
}
}
}
var Selects = function(){
this.BuildInput = function(select){
var textbox = document.createElement("INPUT");
if(select.options != null && select.selectedIndex >=0 ){
textbox.value = select.options[select.selectedIndex].text;
}
textbox.style.width = select.offsetWidth;
textbox.display = 'none';
var className = select.className;
if(className!=null){
className = className.toLowerCase();
if(className == 'select_norrow'){
textbox.className = 'input_narrow';
}
else{
textbox.className = 'input';
}
}
else{
textbox.className = 'input';
}
select.insertAdjacentElement("beforeBegin",textbox);
}
this.HiddenSelect =function(){
var arrSelect = document.getElementsByTagName("SELECT");
for(var i=0;i<arrSelect.length;i++){
var select = arrSelect[i];
if(select.previousSibling == null){
this.BuildInput(select);
}
select.style.display = "none";
try
{
select.previousSibling.style.display = "";
}catch(ex){}
}
}
this.ShowSelect = function(){
var arrSelect = document.getElementsByTagName("SELECT");
for(var i=0;i<arrSelect.length;i++){
var select = arrSelect[i];
if(select.previousSibling == null){
this.BuildInput(select);
}
select.style.display = "";
try
{
select.previousSibling.style.display = "none";
}catch(ex){}
}
}
Selects.instance = this;
}
})();
(function(){
ShadeFactory = {
get_Instance:function(backgroundColor,alpha,zindex){
if(Shade.instance == null){
return new Shade(backgroundColor,alpha,zindex);
}
else{
if(backgroundColor != null){
Shade.instance.ShadeDiv.style.backgroundColor = backgroundColor;
}
else{
Shade.instance.ShadeDiv.style.backgroundColor = "#FFFFFF";
}
if(alpha != null){
Shade.instance.ShadeDiv.style.filter = "alpha(opacity="+alpha+")";
}
else{
Shade.instance.ShadeDiv.style.filter = "alpha(opacity=20)";
}
if(zindex != null){
Shade.instance.ShadeDiv.style.zIndex = zindex;
}
else{
Shade.instance.ShadeDiv.style.zIndex = 1;
}
return Shade.instance;
}
}
}
var Shade = function(backgroundColor,alpha,zindex){
Shade.instance = this;
this.referenceCount = 0;
this.ShadeDiv = document.createElement("DIV");
if(backgroundColor != null){
this.ShadeDiv.style.backgroundColor = backgroundColor;
}
else{
this.ShadeDiv.style.backgroundColor = "#FFFFFF";
}
if(alpha != null){
this.ShadeDiv.style.filter = "alpha(opacity="+alpha+")";
}
else{
this.ShadeDiv.style.filter = "alpha(opacity=20)";
}
if(zindex != null){
this.ShadeDiv.style.zIndex = zindex;
}
else{
this.ShadeDiv.style.zIndex = 1;
}
this.ShadeDiv.style.display = "none";
this.ShadeDiv.style.position = "absolute";
document.body.insertAdjacentElement("afterBegin",this.ShadeDiv);
this.selectsObj = SelectsFactory.get_Instance();
this.Show = function(){
this.referenceCount = this.referenceCount + 1 ;
this.ShadeDiv.style.display="";
this.ShadeDiv.style.left = this.ShadeDiv.style.top = 0;
this.ShadeDiv.style.width = document.documentElement.offsetWidth;
this.ShadeDiv.style.height = document.documentElement.offsetHeight;
if(isIE && version<7){
this.selectsObj.HiddenSelect();
}
}
this.Hidden = function(){
this.referenceCount = this.referenceCount - 1 ;
if(this.referenceCount <= 0){
this.ShadeDiv.style.display="none";
this.ShadeDiv.style.left = this.ShadeDiv.style.top = 0;
this.ShadeDiv.style.width = 0;
this.ShadeDiv.style.height = 0 ;
this.ShadeDiv.style.backgroundColor = "";
this.ShadeDiv.style.filter = "";
if(isIE && version<7){
this.selectsObj.ShowSelect();
}
}
}
}
})();
var isIE = navigator.appName.indexOf("Internet Explorer")!= -1;
var strVersion = navigator.appVersion.toString();
var version =parseInt(strVersion.substring(strVersion.indexOf("MSIE")+4,strVersion.indexOf("MSIE")+8));
var arrMessages = [];
var arrCallBacks = [];
var oldFocus = null;
var oldAlert = window.alert;
window.alert = function(message,callBack)
{
if(!isIE){
oldAlert(message);
eval(callBack);
return;
}
if(isAlertDivBuilded == false){
BuildAlertDiv();
}
var shadeObj = ShadeFactory.get_Instance("#FFFFFF",0,1000);
if(arrMessages.length <=0){
shadeObj.Show();
}
var alertButton = document.getElementById("alertButton");
var closeButton = document.getElementById("closeButton");
function ShowAlertDiv(message){
var alertMessageDiv= document.getElementById("alertMessageDiv");
alertMessageDiv.innerHTML = message;
var alertDiv = document.getElementById("AlertDiv");
alertDiv.style.display = "";
alertDiv.style.top = document.documentElement.scrollTop + ( document.documentElement.clientHeight - parseInt(alertDiv.offsetHeight))/2 + "px";
alertDiv.style.left = document.documentElement.scrollLeft +( document.documentElement.clientWidth - parseInt(alertDiv.offsetWidth))/2 + "px";
alertButton.focus();
}
if(arrMessages.length <=0){
oldFocus = document.activeElement;
ShowAlertDiv(message);
}
arrMessages.push(message);
arrCallBacks.push(callBack);
function HiddenAlertDiv(){
arrMessages.shift();
if(arrCallBacks.length > 0 && arrCallBacks[0] != null){
eval(arrCallBacks[0]);
arrCallBacks.shift();
}
if(arrMessages.length > 0){
ShowAlertDiv(arrMessages[0]);
return;
}
else{
if(oldFocus != null && oldFocus.disabled == false){
oldFocus.focus();
}
}
shadeObj.Hidden();
document.getElementById("AlertDiv").style.display="none";
}
if(document.addEventListener){
closeButton.addEventListener("click",HiddenAlertDiv,false);
alertButton.addEventListener("click",HiddenAlertDiv,false);
}
else{
closeButton.onclick = alertButton.onclick = HiddenAlertDiv;
}
}
var oldEventX = 0,oldEventY = 0;
var ShadeArea;
var WinArea;
var canmove=false;
var hover='#000000',normal='#000000';
function BeginDrag(obj){
if(event.button==1)
{
WinArea = obj.parentNode;
ShadeArea = WinArea.nextSibling;
obj.setCapture();
oldEventX = event.clientX;
oldEventY = event.clientY;
oldLeft = parseInt(WinArea.style.left);
oldTop = parseInt(WinArea.style.top);
ShadeArea.style.width = WinArea.offsetWidth;
ShadeArea.style.height = WinArea.offsetHeight;
ShadeArea.style.display = "";
ShadeArea.style.left = oldLeft +5;
ShadeArea.style.top = oldTop + 5;
ShadeArea.style.backgroundColor = normal;
ShadeArea.style.filter = "alpha(opacity=40)";
canmove = true;
}
}
function EndDrag(obj){
if(canmove)
{
ShadeArea.style.display = "none";
ShadeArea.style.left = oldLeft;
ShadeArea.style.top = oldTop;
obj.releaseCapture();
canmove = false;
}
}
function Draging(obj){
if(canmove){
WinArea.style.left = oldLeft + event.clientX - oldEventX;
WinArea.style.top = oldTop + event.clientY - oldEventY;
ShadeArea.style.left = parseInt(WinArea.style.left) + 5;
ShadeArea.style.top = parseInt(WinArea.style.top) + 5;
}
}
var isAlertDivBuilded = false;
function BuildAlertDiv(){
var strAlert = "";
strAlert += "<div id='AlertDiv' style='position:absolute;display:none;z-index:1002; display:none;'>";
strAlert +=" <div class='message_width' onmousedown='BeginDrag(this)' onmouseup='EndDrag(this)' onmousemove='Draging(this)'>";
strAlert +=" <table class='message_title'>";
strAlert +=" <tr>";
strAlert +=" <td><div class='message_div'>Information</div>";
strAlert +=" <div class='message_close'><a href='#'><img id='closeButton' style='cursor:pointer;' src='http://www.cnblogs.com/images/cnblogs_com/charles2008/close.gif' alt='Close' title='Close' width='40' height='40' /></a></div></td>";
strAlert +=" </tr>";
strAlert +=" </table>";
strAlert +=" </div>";
strAlert +=" <div class='message_width'>";
strAlert +=" <table class='message_contain' cellpadding='0' cellspacing='0'>";
strAlert +=" <tr>";
strAlert +=" <td colspan='2' height='25'> </td>";
strAlert +=" </tr>";
strAlert +=" <tr>";
strAlert +=" <td class='message_leftcontain'><img src='http://www.cnblogs.com/images/cnblogs_com/charles2008/information.gif' alt='Information' title='Information' width='40' height='40' /></td>";
strAlert +=" <td class='message_rightcontain'><div id='alertMessageDiv'>";
strAlert +=" </div>";
strAlert +=" </tr>";
strAlert +=" <tr>";
strAlert +=" <td colspan='2' height='35'> </td>";
strAlert +=" </tr>";
strAlert +=" <tr>";
strAlert +=" <td colspan='2' class='message_button'><input id='alertButton' class='button_short' type='button' name='btnOk' value='OK'/></td>";
strAlert +=" </tr>";
strAlert +=" </table>";
strAlert +=" </div>";
strAlert +="</div>";
strAlert +="<div style='position:absolute; z-index:1001; display:none;'></div>";
document.body.insertAdjacentHTML("afterBegin",strAlert);
isAlertDivBuilded = true;
}
(function(){
SelectsFactory = {
get_Instance:function(){
if(Selects.instance == null){
return new Selects();
}
else{
return Selects.instance;
}
}
}
var Selects = function(){
this.BuildInput = function(select){
var textbox = document.createElement("INPUT");
if(select.options != null && select.selectedIndex >=0 ){
textbox.value = select.options[select.selectedIndex].text;
}
textbox.style.width = select.offsetWidth;
textbox.display = 'none';
var className = select.className;
if(className!=null){
className = className.toLowerCase();
if(className == 'select_norrow'){
textbox.className = 'input_narrow';
}
else{
textbox.className = 'input';
}
}
else{
textbox.className = 'input';
}
select.insertAdjacentElement("beforeBegin",textbox);
}
this.HiddenSelect =function(){
var arrSelect = document.getElementsByTagName("SELECT");
for(var i=0;i<arrSelect.length;i++){
var select = arrSelect[i];
if(select.previousSibling == null){
this.BuildInput(select);
}
select.style.display = "none";
try
{
select.previousSibling.style.display = "";
}catch(ex){}
}
}
this.ShowSelect = function(){
var arrSelect = document.getElementsByTagName("SELECT");
for(var i=0;i<arrSelect.length;i++){
var select = arrSelect[i];
if(select.previousSibling == null){
this.BuildInput(select);
}
select.style.display = "";
try
{
select.previousSibling.style.display = "none";
}catch(ex){}
}
}
Selects.instance = this;
}
})();
(function(){
ShadeFactory = {
get_Instance:function(backgroundColor,alpha,zindex){
if(Shade.instance == null){
return new Shade(backgroundColor,alpha,zindex);
}
else{
if(backgroundColor != null){
Shade.instance.ShadeDiv.style.backgroundColor = backgroundColor;
}
else{
Shade.instance.ShadeDiv.style.backgroundColor = "#FFFFFF";
}
if(alpha != null){
Shade.instance.ShadeDiv.style.filter = "alpha(opacity="+alpha+")";
}
else{
Shade.instance.ShadeDiv.style.filter = "alpha(opacity=20)";
}
if(zindex != null){
Shade.instance.ShadeDiv.style.zIndex = zindex;
}
else{
Shade.instance.ShadeDiv.style.zIndex = 1;
}
return Shade.instance;
}
}
}
var Shade = function(backgroundColor,alpha,zindex){
Shade.instance = this;
this.referenceCount = 0;
this.ShadeDiv = document.createElement("DIV");
if(backgroundColor != null){
this.ShadeDiv.style.backgroundColor = backgroundColor;
}
else{
this.ShadeDiv.style.backgroundColor = "#FFFFFF";
}
if(alpha != null){
this.ShadeDiv.style.filter = "alpha(opacity="+alpha+")";
}
else{
this.ShadeDiv.style.filter = "alpha(opacity=20)";
}
if(zindex != null){
this.ShadeDiv.style.zIndex = zindex;
}
else{
this.ShadeDiv.style.zIndex = 1;
}
this.ShadeDiv.style.display = "none";
this.ShadeDiv.style.position = "absolute";
document.body.insertAdjacentElement("afterBegin",this.ShadeDiv);
this.selectsObj = SelectsFactory.get_Instance();
this.Show = function(){
this.referenceCount = this.referenceCount + 1 ;
this.ShadeDiv.style.display="";
this.ShadeDiv.style.left = this.ShadeDiv.style.top = 0;
this.ShadeDiv.style.width = document.documentElement.offsetWidth;
this.ShadeDiv.style.height = document.documentElement.offsetHeight;
if(isIE && version<7){
this.selectsObj.HiddenSelect();
}
}
this.Hidden = function(){
this.referenceCount = this.referenceCount - 1 ;
if(this.referenceCount <= 0){
this.ShadeDiv.style.display="none";
this.ShadeDiv.style.left = this.ShadeDiv.style.top = 0;
this.ShadeDiv.style.width = 0;
this.ShadeDiv.style.height = 0 ;
this.ShadeDiv.style.backgroundColor = "";
this.ShadeDiv.style.filter = "";
if(isIE && version<7){
this.selectsObj.ShowSelect();
}
}
}
}
})();
var isIE = navigator.appName.indexOf("Internet Explorer")!= -1;
var strVersion = navigator.appVersion.toString();
var version =parseInt(strVersion.substring(strVersion.indexOf("MSIE")+4,strVersion.indexOf("MSIE")+8));
var arrMessages = [];
var arrCallBacks = [];
var oldFocus = null;
var oldAlert = window.alert;
window.alert = function(message,callBack)
{
if(!isIE){
oldAlert(message);
eval(callBack);
return;
}
if(isAlertDivBuilded == false){
BuildAlertDiv();
}
var shadeObj = ShadeFactory.get_Instance("#FFFFFF",0,1000);
if(arrMessages.length <=0){
shadeObj.Show();
}
var alertButton = document.getElementById("alertButton");
var closeButton = document.getElementById("closeButton");
function ShowAlertDiv(message){
var alertMessageDiv= document.getElementById("alertMessageDiv");
alertMessageDiv.innerHTML = message;
var alertDiv = document.getElementById("AlertDiv");
alertDiv.style.display = "";
alertDiv.style.top = document.documentElement.scrollTop + ( document.documentElement.clientHeight - parseInt(alertDiv.offsetHeight))/2 + "px";
alertDiv.style.left = document.documentElement.scrollLeft +( document.documentElement.clientWidth - parseInt(alertDiv.offsetWidth))/2 + "px";
alertButton.focus();
}
if(arrMessages.length <=0){
oldFocus = document.activeElement;
ShowAlertDiv(message);
}
arrMessages.push(message);
arrCallBacks.push(callBack);
function HiddenAlertDiv(){
arrMessages.shift();
if(arrCallBacks.length > 0 && arrCallBacks[0] != null){
eval(arrCallBacks[0]);
arrCallBacks.shift();
}
if(arrMessages.length > 0){
ShowAlertDiv(arrMessages[0]);
return;
}
else{
if(oldFocus != null && oldFocus.disabled == false){
oldFocus.focus();
}
}
shadeObj.Hidden();
document.getElementById("AlertDiv").style.display="none";
}
if(document.addEventListener){
closeButton.addEventListener("click",HiddenAlertDiv,false);
alertButton.addEventListener("click",HiddenAlertDiv,false);
}
else{
closeButton.onclick = alertButton.onclick = HiddenAlertDiv;
}
}
CSS部分
/*---------------以下信息提示框样式-------------------*/
.message_width{
width: 420px;
color: #31415A;
}
.message_title {
width: 420px;
background-color: #DEEAF4;
border-top: solid 1px #8F8F8F;
border-left: solid 1px #8F8F8F;
border-right: solid 1px #8F8F8F;
border-bottom: 0px;
}
.message_div {
float: left;
font-weight: bold;
padding-top: 6px;
padding-left: 10px;
}
.message_close {
float: right;
padding: 9px;
height: 8px;
width: 8px;
}
.message_close img {
border: 0px;
width: 8px;
height: 8px;
}
.message_close a {
background: url(../Image/close.gif) no-repeat;
}
.message_close a:hover {
background: url(../Image/close_mouseon.gif) no-repeat;
}
.message_contain {
width: 420px;
border-top: 0px;
border-left: solid 1px #8F8F8F;
border-right: solid 1px #8F8F8F;
border-bottom: solid 1px #8F8F8F;
background-color: #FFFFFF;
}
.message_leftcontain {
width: 100px;
text-align: right;
vertical-align: top;
}
.message_rightcontain
{
word-break:break-all;
padding: 0px 45px;
}
.message_button {
text-align:center;
padding: 10px;
}
.list {
margin: 0px 20px 0px 5px;
padding: 0px 3px 0px 3px;
line-height: 20px;
border: 1px solid #AABACA;
font-size: 12px;
}
.message_width{
width: 420px;
color: #31415A;
}
.message_title {
width: 420px;
background-color: #DEEAF4;
border-top: solid 1px #8F8F8F;
border-left: solid 1px #8F8F8F;
border-right: solid 1px #8F8F8F;
border-bottom: 0px;
}
.message_div {
float: left;
font-weight: bold;
padding-top: 6px;
padding-left: 10px;
}
.message_close {
float: right;
padding: 9px;
height: 8px;
width: 8px;
}
.message_close img {
border: 0px;
width: 8px;
height: 8px;
}
.message_close a {
background: url(../Image/close.gif) no-repeat;
}
.message_close a:hover {
background: url(../Image/close_mouseon.gif) no-repeat;
}
.message_contain {
width: 420px;
border-top: 0px;
border-left: solid 1px #8F8F8F;
border-right: solid 1px #8F8F8F;
border-bottom: solid 1px #8F8F8F;
background-color: #FFFFFF;
}
.message_leftcontain {
width: 100px;
text-align: right;
vertical-align: top;
}
.message_rightcontain
{
word-break:break-all;
padding: 0px 45px;
}
.message_button {
text-align:center;
padding: 10px;
}
.list {
margin: 0px 20px 0px 5px;
padding: 0px 3px 0px 3px;
line-height: 20px;
border: 1px solid #AABACA;
font-size: 12px;
}