HTML页面弹出自定义对话框并跳转页…

方法一 系统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.getElementByIdx_x(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_x( " 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_x( " 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.getElementByIdx_x( " 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_x( " 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>的时候，可能会触发页面自刷屏导致页面跳转被自己覆盖