HTML页面弹出自定义对话框并跳转页面的两种方法（使用JavaScript）

方法一 系统API法：
调用window.showModalDialog打开以自定义页面为内容的对话框。根据其返回值，通过window.location.href跳转指定页面。window.showModalDialog的使用方法请参考http://msdn.microsoft.com/en-us/library/ms536759(VS.85).aspx

<!-- 需要弹出对话框的页面 -->
< script  type ="text/javascript" >
function  fnOpen()
{
      var  r  =  window.showModalDialog( " http://dlg.aspx " ,  "" ,  " dialogWidth: 200px; dialogHeight: 200px; resizable: no; scroll: no;status: no;edge: sunken;unadorned: yes; " );
 
      switch (r)
     {
         case   1 :
        window.location.href = " http://1.aspx "
         break ;
         default :
         break ;
    }                          
}
</ script >
<!-- img控件，点击调用fnOpen -->
< div  id ="1"  align ="center"  style ="cursor:pointer" >
< br >< img  src ="1.png"  alt =""  style ="width:123px;height:43px;"  onclick ="fnOpen()" />
</ div >                         

新建一个dlg.aspx，在里面随意添加需要显示的内容，在退出时赋以返回值。

<!-- dlg.aspx添加返回值以及关闭对话框 -->
< input  name ="Btn"  type ="button"  value ="1"   styleonclick ="window.returnValue=1;window.close();" ></ td >

优点：方便快速，比较简单。
缺点：在非IE下运行可能会不正常。对话框的边框去不掉。
拓展：还可以使用window.open,showmodelessDialog等方法，做法类似，效果各有不同。

方法二：遮罩法
通过遮罩，事先隐藏一个div，在需要的时候调出显示既可。

<!-- 以下代码从网上多处学习整合而成，由于来源不一，并经过自行修改，请原谅未作注明 -->
< script  type ="text/javascript" >
var  docEle  =   function () 
{
    return  document.getElementById(arguments[ 0 ])  ||   false ;
}
                
                
function  openNewDiv(_id) 
{
     var  m  =   " mask " ;
     if  (docEle(_id)) document.body.removeChild(docEle(_id));
     if  (docEle(m)) document.body.removeChild(docEle(m));
    
     // mask遮罩层

     var  newMask  =  document.createElement( " div " );
    newMask.id  =  m;
    newMask.style.position  =   " absolute " ;
    newMask.style.zIndex  =   " 1 " ;
    _scrollWidth  =  Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
    _scrollHeight  =  Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
    newMask.style.width  =  _scrollWidth  +   " px " ;
    newMask.style.height  =  _scrollHeight  +   " px " ;
    newMask.style.top  =   " 0px " ;
    newMask.style.left  =   " 0px " ;
    newMask.style.background  =   " #33393C " ;
    newMask.style.filter  =   " alpha(opacity=40) " ;
    newMask.style.opacity  =   " 0.40 " ;
    document.body.appendChild(newMask);
    
     // 新弹出层

     var  newDiv  =  document.createElement( " div " );
    newDiv.id  =  _id;
    newDiv.style.position  =   " absolute " ;
    newDiv.style.zIndex  =   " 9999 " ;
    newDivWidth  =   250 ;
    newDivHeight  =   200 ;
    newDiv.style.width  =  newDivWidth  +   " px " ;
    newDiv.style.height  =  newDivHeight  +   " px " ;
    newDiv.style.top  =  (document.body.scrollTop  +  document.body.clientHeight / 2 - newDivHeight / 2 )  +   " px " ;
    newDiv.style.left  =  (document.body.scrollLeft  +  document.body.clientWidth / 2 - newDivWidth / 2 )  +   " px " ;
    newDiv.style.background  =   " #EFEFEF " ;
    newDiv.style.border  =   " 1px solid #860001 " ;
    newDiv.style.padding  =   " 5px " ;
    newDiv.innerHTML  =  document.getElementById( " HideDlg " ).innerHTML;
    newDiv.innerHTML +=   " &nbsp "
    document.body.appendChild(newDiv);
    
     // 弹出层滚动居中
    
     function  newDivCenter()
   {
        newDiv.style.top  =  (document.body.scrollTop  +  document.body.clientHeight / 2 - newDivHeight / 2 )  +   " px " ;
        newDiv.style.left  =  (document.body.scrollLeft  +  document.body.clientWidth / 2 - newDivWidth / 2 )  +   " px " ;
   }    
    if (document.all)
   {
        window.attachEvent( " onscroll " ,newDivCenter);
   }
    else
   {
        window.addEventListener( ' scroll ' ,newDivCenter, false );
   }
    
    // 关闭新图层和mask遮罩层
                    
    var  newA  =  document.createElement( " a " );
   newA.href  =   " # " ;
   newA.innerHTML  =   " Cancel " ;
   newA.onclick  =   function () 
   {
         if (document.all)
        {
            window.detachEvent( " onscroll " ,newDivCenter);
        }
         else
        {
            window.removeEventListener( ' scroll ' ,newDivCenter, false );
        }
        document.body.removeChild(docEle(_id));
        document.body.removeChild(docEle(m));
         return   false ;
    }        
    newDiv.appendChild(newA);
}

function  closeDiv() 
{
     if (document.all)
    {
        window.detachEvent( " onscroll " ,newDivCenter);
    }
     else
    {
        window.removeEventListener( ' scroll ' ,newDivCenter, false );
    }
        document.body.removeChild(docEle(_id));
        document.body.removeChild(docEle(m));
         return   false ;
}    
</ script >
<!-- img控件，点击触发 -->
< div  id ="1"  align ="center"  style ="cursor:pointer" >
< br >
< img  src ="1.png"  alt =""  style ="width:123px;height:43px;"  onclick ="openNewDiv('newDiv');return false;" />                               
</ div >
<!-- 隐藏的div，随意修改 -->
< div  id ="HideDlg"  style ="display:none;" >
< input  name ="Btn"  type ="button"  value ="1"  onclick ="window.location.href='http://1.aspx'    
</div>

优点：显示效果好，无边框，弹出后始终保持在屏幕中部，主页面变灰。
缺点：代码复杂。
注意：如果是在motherpage中添加，触发控件如果为<input img>的时候，可能会触发页面自刷屏导致页面跳转被自己覆盖
。
仅供大家参考，学习交流之用。

 

转载于:https://www.cnblogs.com/zj27sWizardTower/archive/2009/09/08/1562420.html