• 【转】window.open重写实现友好的对话框


    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'>&nbsp;</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'>&nbsp;</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;
    }
  • 相关阅读:
    【Cocos2d js系列】创建一个弹出框
    Java内存模型
    linux系统-CPU上下文切换
    网络编程-套接字(socket)
    Java虚拟机组成及原理
    swarm
    docker-machine
    存储卷类型
    NOSQL数据库使用存储卷
    建立持久化的容器
  • 原文地址:https://www.cnblogs.com/CB/p/1159834.html
Copyright © 2020-2023  润新知