JS弹出层（功能强大非框架开发）

function dialog()
{
 var titile = '';
 var width = 300;
 var height = 180;
 var src = "";
 var path = "http://user.bfor.cn/images/dialog/";
 var sFunc = '<input id="dialogOk" type="button" style="{62px;height:22px;border:0;background:url(\'http://user.bfor.cn/images/dialog/smb_btn_bg.gif\');line-height:20px;" value="确认" onclick="new dialog().reset();" /> <input id="dialogCancel" type="button" style="{62px;height:22px;border:0;background:url(\'http://user.bfor.cn/images/dialog/smb_btn_bg.gif\');line-height:20px;" value="取消" onclick="new dialog().reset();" />';
 var sClose = '<input type="image" id="dialogBoxClose" onclick="new dialog().reset();" src="' + path + 'dialogClose0.gif" border="0" width="17" height="17" onmouseover="this.src=\'' + path + 'dialogCloseF.gif\';" onmouseout="this.src=\'' + path + 'dialogClose0.gif\';" align="absmiddle" />';
 var sBody = '\
  <table id="dialogBodyBox" border="0" align="center" cellpadding="0" cellspacing="0">\
   <tr height="10"><td colspan="4"></td></tr>\
   <tr>\
    <td width="10"></td>\
    <td width="80" align="center" valign="absmiddle"><img id="dialogBoxFace" src="' + path + '3.gif" /></td>\
    <td id="dialogMsg" style="font-size:12px;"></td>\
    <td width="10"></td>\
   </tr>\
   <tr height="10"><td colspan="4" align="center"></td></tr>\
   <tr><td id="dialogFunc" colspan="4" align="center">' + sFunc + '</td></tr>\
   <tr height="10"><td colspan="4" align="center"></td></tr>\
  </table>\
 ';
 var sBox = '\
  <table id="dialogBox" width="' + width + '" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #000;display:none;z-index:10;">\
   <tr height="1" bgcolor="#D6E3EB"><td></td></tr>\
   <tr height="25" bgcolor="#808080">\
    <td>\
     <table onselectstart="return false;" style="-moz-user-select:none;" width="100%" border="0" cellpadding="0" cellspacing="0">\
      <tr>\
       <td width="6"></td>\
       <td id="dialogBoxTitle" onmousedown="new dialog().moveStart(event, \'dialogBox\')" style="color:#fff;cursor:move;font-size:12px;font-weight:bold;">&nbsp;</td>\
       <td id="dialogClose" width="27" align="right" valign="middle">\
        ' + sClose + '\
       </td>\
       <td width="6"></td>\
      </tr>\
     </table>\
    </td>\
   </tr>\
   <tr height="2" bgcolor="#EDEDED"><td></td></tr>\
   <tr id="dialogHeight" style="height:' + height + '">\
    <td id="dialogBody"  style="background-color:#ffffff; color:#000000"><font color="#000000">' + sBody + '</font></td>\
   </tr>\
  </table>\
  <div id="dialogBoxShadow" style="display:none;z-index:9;"></div>\
 ';
 var sBG = '\
  <div id="dialogBoxBG" style="position:absolute;top:0px;left:0px;100%;height:100%;background:url(http://user.bfor.cn/images/dialog/blank.gif);%22%3E%3C/div%3E/
 ';
 function $(_sId){return document.getElementById(_sId)}
 this.show = function(){
  this.middle('dialogBox');
  this.shadow();
  //$("dialogBoxBG").style.width = document.body.scrollWidth;
  //$("dialogBoxBG").style.height = document.body.scrollHeight;
 }
 this.reset = function(){$('dialogBox').style.display='none';$('dialogBoxBG').style.display='none';$('dialogBoxShadow').style.display = "none";$('dialogBody').innerHTML = sBody;
    if($("testiframe"))
  window.opener.location.href=window.opener.location.href; 
 }
 this.html = function(_sHtml){$("dialogBody").innerHTML = _sHtml;this.show();}
 this.init = function(){
  $('dialogCase') ? $('dialogCase').parentNode.removeChild($('dialogCase')) : function(){};
  var oDiv = document.createElement('span');
  oDiv.id = "dialogCase";
  oDiv.innerHTML = sBG + sBox;
  document.body.appendChild(oDiv);
  $('dialogBoxBG').style.height = document.body.scrollHeight;
 }
 this.button = function(_sId, _sFuc){
  if($(_sId)){
   $(_sId).style.display = '';
   if($(_sId).addEventListener){
    if($(_sId).act){$(_sId).removeEventListener('click', function(){eval($(_sId).act)}, false);}
    $(_sId).act = _sFuc;
    $(_sId).addEventListener('click', function(){eval(_sFuc)}, false);
   }else{
    if($(_sId).act){$(_sId).detachEvent('onclick', function(){eval($(_sId).act)});}
    $(_sId).act = _sFuc;
    $(_sId).attachEvent('onclick', function(){eval(_sFuc)});
   }
  }
 }
 this.shadow = function(){
  var oShadow = $('dialogBoxShadow');
  var oDialog = $('dialogBox');
  oShadow['style']['position'] = "absolute";
  oShadow['style']['background'] = "#000";
  oShadow['style']['display'] = "";
  oShadow['style']['opacity'] = "0.2";
  oShadow['style']['filter'] = "alpha(opacity=20)";
  oShadow['style']['top'] = oDialog.offsetTop + 6;
  oShadow['style']['left'] = oDialog.offsetLeft + 6;
  oShadow['style']['width'] = oDialog.offsetWidth;
  oShadow['style']['height'] = oDialog.offsetHeight;
 }
 this.open = function(_sUrl, _sMode){
  this.show();
  if(!_sMode || _sMode == "no" || _sMode == "yes"){
   $("dialogBody").innerHTML = "<iframe width='100%' id='testiframe' height='100%' src='" + _sUrl + "'    frameborder='0' scrolling='" + _sMode + "'></iframe>";
           $("testiframe").src=$("testiframe").src;
  }
  
 }
 this.showWindow = function(_sUrl, _iWidth, _iHeight, _sMode){
  var oWindow;
  var sLeft = (screen.width) ? (screen.width - _iWidth)/2 : 0;
  var iTop = -80 + (screen.height - _iHeight)/2;
  iTop = iTop > 0 ? iTop : (screen.height - _iHeight)/2;
  var sTop = (screen.height) ? iTop : 0;
  if(window.showModalDialog && _sMode == "m"){
   oWindow = window.showModalDialog(_sUrl,"","dialogWidth:" + _iWidth + "px;dialogheight:" + _iHeight + "px");
  } else {
   oWindow = window.open(_sUrl, '', 'height=' + _iHeight + ', width=' + _iWidth + ', top=' + sTop + ', left=' + sLeft + ', toolbar=no, menubar=no, scrollbars=' + _sMode + ', resizable=no,location=no, status=no');
   this.reset();
  }
 }
 this.event = function(_sMsg, _sOk, _sCancel, _sClose){
  $('dialogFunc').innerHTML = sFunc;
  $('dialogClose').innerHTML = sClose;
  $('dialogBodyBox') == null ? $('dialogBody').innerHTML = sBody : function(){};
  $('dialogMsg') ? $('dialogMsg').innerHTML = _sMsg  : function(){};
  _sOk && _sOk != "" ? this.button('dialogOk', _sOk) : $('dialogOk').style.display = 'none';
  _sCancel && _sCancel != "" ? this.button('dialogCancel', _sCancel) : $('dialogCancel').style.display = 'none';
  //_sOk ? this.button('dialogOk', _sOk) : _sOk == "" ? function(){} : $('dialogCancel').style.display = 'none';
  //_sCancel ? this.button('dialogCancel', _sCancel) : _sCancel == "" ? function(){} : $('dialogCancel').style.display = 'none';
  _sClose ? this.button('dialogBoxClose', _sClose) : function(){};
  this.show();
 }
 this.set = function(_oAttr, _sVal){
  var oShadow = $('dialogBoxShadow');
  var oDialog = $('dialogBox');
  var oHeight = $('dialogHeight');

  if(_sVal != ''){
   switch(_oAttr){
    case 'title':
     $('dialogBoxTitle').innerHTML = _sVal;
     title = _sVal;
     break;
    case 'width':
     oDialog['style']['width'] = _sVal;
     width = _sVal;
     break;
    case 'height':
     oHeight['style']['height'] = _sVal;
     height = _sVal;
     break;
    case 'src':
     if(parseInt(_sVal) > 0){
      $('dialogBoxFace') ? $('dialogBoxFace').src = path + _sVal + '.gif' : function(){};
     }else{
      $('dialogBoxFace') ? $('dialogBoxFace').src = _sVal : function(){};
     }
     src = _sVal;
     break;
   }
  }
  this.middle('dialogBox');
  oShadow['style']['top'] = oDialog.offsetTop + 6;
  oShadow['style']['left'] = oDialog.offsetLeft + 6;
  oShadow['style']['width'] = oDialog.offsetWidth;
  oShadow['style']['height'] = oDialog.offsetHeight;
 }
 this.moveStart = function (event, _sId){
  var oObj = $(_sId);
  oObj.onmousemove = mousemove;
  oObj.onmouseup = mouseup;
  oObj.setCapture ? oObj.setCapture() : function(){};
  oEvent = window.event ? window.event : event;
  var dragData = {x : oEvent.clientX, y : oEvent.clientY};
  var backData = {x : parseInt(oObj.style.top), y : parseInt(oObj.style.left)};
  function mousemove(){
   var oEvent = window.event ? window.event : event;
   var iLeft = oEvent.clientX - dragData["x"] + parseInt(oObj.style.left);
   var iTop = oEvent.clientY - dragData["y"] + parseInt(oObj.style.top);
   oObj.style.left = iLeft;
   oObj.style.top = iTop;
   $('dialogBoxShadow').style.left = iLeft + 6;
   $('dialogBoxShadow').style.top = iTop + 6;
   dragData = {x: oEvent.clientX, y: oEvent.clientY};
   
  }
  function mouseup(){
   var oEvent = window.event ? window.event : event;
   oObj.onmousemove = null;
   oObj.onmouseup = null;
   if(oEvent.clientX < 1 || oEvent.clientY < 1 || oEvent.clientX > document.body.clientWidth || oEvent.clientY > document.body.clientHeight){
    oObj.style.left = backData.y;
    oObj.style.top = backData.x;
    $('dialogBoxShadow').style.left = backData.y + 6;
    $('dialogBoxShadow').style.top = backData.x + 6;
   }
   oObj.releaseCapture ? oObj.releaseCapture() : function(){};
  }
 }
 this.hideModule = function(_sType, _sDisplay){
  var aIframe = parent.document.getElementsByTagName("iframe");aIframe=0;
  var aType = document.getElementsByTagName(_sType);
  var iChildObj, iChildLen;
  for (var i = 0; i < aType.length; i++){
   aType[i].style.display = _sDisplay;
  }
  for (var j = 0; j < aIframe.length; j++){
   iChildObj = document.frames ? document.frames[j] : aIframe[j].contentWindow;
   iChildLen = iChildObj.document.body.getElementsByTagName(_sType).length;
   for (var k = 0; k < iChildLen; k++){
    iChildObj.document.body.getElementsByTagName(_sType)[k].style.display = _sDisplay;
   }
  }
 }
 this.middle = function(_sId){
  var sClientWidth = parent ? parent.document.body.clientWidth : document.body.clientWidth;
  var sClientHeight = parent ? parent.document.body.clientHeight : document.body.clientHeight;
  var sScrollTop = parent ? parent.document.body.scrollTop : document.body.scrollTop;
  document.getElementById(_sId)['style']['display'] = '';
  document.getElementById(_sId)['style']['position'] = "absolute";
  document.getElementById(_sId)['style']['left'] = (document.body.clientWidth / 2) - (document.getElementById(_sId).offsetWidth / 2);
  var sTop = -80 + (sClientHeight / 2 + sScrollTop) - (document.getElementById(_sId).offsetHeight / 2);
  document.getElementById(_sId)['style']['top'] = sTop > 0 ? sTop : (sClientHeight / 2 + sScrollTop) - (document.getElementById(_sId).offsetHeight / 2);
 }
}

function _error_msg_show(msg, click, icon, title)
{
    click = click ? click : ' ';
    icon = icon ? icon : '';
    title = title ? title : '系统提示信息';

    switch (icon)
    {
    case 'forbid':
        icon = 1;
        break;

    case 'succ':
        icon = 2;
        break;

    case 'smile':
        icon = 3;
        break;

    case 'forget':
        icon = 4;
        break;

    case 'sorry':
        icon = 5;
        break;

    case 'care':
        icon = 6;
        break;

    case '':
        icon = 5;
        break;
    }

    dg=new dialog();
    dg.init();
    dg.set('src', icon);
    dg.set('title', title);
    dg.event(msg, click, '', click);
}

function _win_error_msg_show(msg, click, icon, top, left, width, height)
{
    click = click ? click : ' ';
    icon = icon ? icon : '';
    title = '系统提示信息';
    top = top ? top : 80;
    switch (icon)
    {
    case 'forbid':
        icon = 1;
        break;

    case 'succ':
        icon = 2;
        break;

    case 'smile':
        icon = 3;
        break;

    case 'forget':
        icon = 4;
        break;

    case 'sorry':
        icon = 5;
        break;

    case 'care':
        icon = 6;
        break;

    case '':
        icon = 5;
        break;
    }
    dg=new dialog();
    dg.init();

    dg.set('src', icon);

    dg.set('title', title);
 
    if (width)
    {
        dg.set('width', width);
    }
    if (height)
    {
        dg.set('height', height);
    }

    dg.event(msg, click, '', click);

 
    if (left)
    {
         document.getElementById('dialogBox')['style']['left'] = left;
         document.getElementById('dialogBoxShadow')['style']['left'] = left;
    }
    if (top)
    {
  document.getElementById('dialogBox')['style']['top'] = top;
  document.getElementById('dialogBoxShadow')['style']['top'] = top;
    }

}

function _confirm_msg_show(msg, click_ok, click_no, title)
{
    click_ok = click_ok ? click_ok : ' ';
    click_no = click_no ? click_no : ' ';
    title = title ? title : '系统提示信息';

    dg=new dialog();
    dg.init();
    dg.set('src', 3); // smile
    dg.set('title', title);
    dg.event(msg, click_ok, click_no, click_no);
}

function _win_confirm_msg_show(msg, click_ok, click_no, top, left, width, height)
{
    click_ok = click_ok ? click_ok : ' ';
    click_no = click_no ? click_no : ' ';
    title = '系统提示信息';
    top = top ? top : 80;

    dg=new dialog();
    dg.init();
    dg.set('src', 3);   // smile
    dg.set('title', title);

    if (width)
    {
        dg.set('width', width);
    }
    if (height)
    {
        dg.set('height', height);
    }

    dg.event(msg, click_ok, click_no, click_no);

    if (left)
    {
         document.getElementById('dialogBox')['style']['left'] = left;
         document.getElementById('dialogBoxShadow')['style']['left'] = left;
    }
    if (top)
    {
         document.getElementById('dialogBox')['style']['top'] = top;
         document.getElementById('dialogBoxShadow')['style']['top'] = top;
    }
}
   
function openWindow(_sUrl, _sWidth, _sHeight, _sTitle, _sScroll)
{
var oEdit = new dialog();oEdit.init();
oEdit.set('title', _sTitle ? _sTitle : "系统提示信息" );
oEdit.set('width', _sWidth);oEdit.set('height', _sHeight);
oEdit.open(_sUrl, _sScroll ? 'no' : 'yes');
}