（100分）弹出层的问题．

<style>
#fot{
position:absolute; 
z-index:99;
width:200px; 
height:100px; 
border:1px solid #ccc; 
text-align:center; 
padding:40px;
display:none ;
}
</style>
<script>
function Offset(e){ 
    var t = e.offsetTop; 
    var l = e.offsetLeft; 
var w = e.offsetWidth;
var h = e.offsetHeight;
    while(e=e.offsetParent) 
    { 
        t+=e.offsetTop; 
        l+=e.offsetLeft; 
    } 
    return { 
        top : t, 
        left : l,
        width : w,
        height : h
    } 
} 
function fot(e){
var a = document.getElementById("fot");
    var offset = Offset(e); 
a.style.top = offset.top+offset.height;
a.style.left = offset.left+offset.width;
a.style.display = 'block';
a.getElementsByTagName("a")[0].href = e.href;
return false;
}</script>
<div id=fot> <a href="#" onClick="document.getElementById('fot').style.display='none';return true">YES</a> <a href="#" onClick="document.getElementById('fot').style.display='none';return false">NO</a></div><a href="http://www.lesport.cn" onClick="return fot(this)" >乐体网</a>

解决方案 »

  1.   

    看看这个是否对你有用呢:http://topic.csdn.net/u/20080403/15/ed1832c0-ac2f-4a23-8283-edd360fb1b20.html
      

  2.   

    简单的写了个，再改改并美化得像点就差不多了
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>test</title>
    <body>
    <style>
    body{
    font-size:14px;
    margin: 0;
    padding: 0;
    }
    a{
    text-decoration: none;
    }
    #div1{}
    #div2{
    width:120px;
    height:24px;
    line-height: 24px;
    border: 1px #006633 solid;
    text-align:center;
    margin: auto;
    }
    #confirm1{
    width:300px;
    height:140px;
    border: 1px blue solid;
    display:none;
    background: #4169E1;
    position:absolute;
    overflow:hidden;
    }
    #cfTop{
    width: 300px;
    height:90px;
    clear: both;
    margin: auto;
       padding: 6px;
    }
    #cfBom{
       clear: both;
    width: 300px;
    height:30px;
    margin: auto;
    background: Navy;
    }
    </style>
    <script type="text/javascript">
     function cfShow(obj){
      var cf=document.getElementById("confirm1");
      cf.style.left=obj.offsetLeft;
      cf.style.top=obj.offsetTop+obj.offsetHeight;
      cf.style.display="block";
      document.body.style.filter =
    "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
      document.body.style.background="#eeeeee";
     }
     function yesBtn(){
      document.body.style.filter ="";
      document.body.style.background="#ffffff";
      var cf=document.getElementById("confirm1");
      if(cf)cf.style.display="none";
      return "true";
     }
      function noBtn(){
      document.body.style.filter ="";
      document.body.style.background="#ffffff";
      var cf=document.getElementById("confirm1");
      if(cf)cf.style.display="none";
      return "false";
     }
    </script>
    <div id="div1">
     <br />
     &nbsp;&nbsp;<a href="javascript:confirm('yes?');void(0);">弹出确认</a>
    </div>
    <div id="div2">
    <a href="javascript:cfShow(document.getElementById('div2'));">模拟弹出确认</a>
    </div><div id="confirm1">
     <div id="cfTop">确认信息：</div>
     <div id="cfBom">
     <input type="button" value="确定" onclick="alert(yesBtn());" />
     <input type="button" value="取消" onclick="alert(noBtn())"/>
     </div>
    </div>
    </body>
    </html>
    </html>
      

  3.   

    http://topic.csdn.net/u/20080403/15/ed1832c0-ac2f-4a23-8283-edd360fb1b20.html
    这种办法更方便呵……
      

  4.   

    先看效果 
    alert 和 confirm 的重写document.write( "<div  id=\"jqmAlert\" class=\"jqmWindow\"><div id=\"jqmTitle\"><span>这里是标题</span><img  src=\"/admin/include/demo/window_close.jpg\" alt=\"关闭\"  onclick = 'jqmClose();'></div><div id= \"jqmContent\">内容加载中．．．请稍候．　creatByXuxing</div><div id = \"jqmBut\"> <input type=\"button\" id=\"closeJqm\" value=\"关闭\"  onclick = 'jqmClose();'/> </div></div>" );
    document.write( "<div  id=\"jqmComfirm\" class=\"jqmWindow\"><div id=\"jqmTitle2\"><span>这里是标题</span><img  src=\"/admin/include/demo/window_close.jpg\" alt=\"关闭\"  onclick = 'jqmClose2();'></div><div id= \"jqmContent2\">内容加载中．．．请稍候．　creatByXuxing</div><div id = \"jqmBut\"> <input type=\"button\" id=\"closeJqmY\" value=\"确定\"  />  <input type=\"button\" id=\"closeJqmN\" value=\"取消\"  /></div></div>" );function alert( msg )
    {
    if(  arguments.length == 2 ){  //当定制了挂载的模式时．
       
    if( arguments[1].toString() == "div" )
    {

    $( "#jqmContent" ).html ( $("#"+msg).html() );
    $( "#jqmAlert" ).jqm({overlay:0}).jqmShow();
     return ;
    }
    if( arguments[1].toString() == "ajax")
    {
    $( "#jqmContent" ).html ( $("#"+msg).html() );
    $( "#jqmAlert" ).jqm({  ajax: msg, target: '#jqmContent',overlay:0}).jqmShow();
    return;
    }
    }
    else{
    $( "#jqmContent" ).html ( msg );
    $( "#jqmAlert" ).jqm({overlay:0}).jqmShow();
    }

    }function confirm( msg ,handle)
    {
    $( "#jqmContent2" ).html ( msg );
    $( "#jqmComfirm" ).jqm({overlay:0}).jqmShow();
    $("#closeJqmN").click( function() {  $( "#jqmComfirm").jqmHide(); handle(0) } ); 
    $("#closeJqmY").click( function() {  $( "#jqmComfirm").jqmHide(); handle(1) } ); 

    }
    function jqmClose()
    {
     $( "#jqmAlert").jqmHide();
    }function jqmClose2()
    {
    $( "#jqmComfirm").jqmHide();
    }
    相关的jqm插件和jquery 以及css的样式表自己刚才那个演示地址下载。
      

  5.   

    嗯 ，这个很好，还有那种在旁边弹出的层呢？
    分我先给你，能帮我解决一下吗？
    就是在指定的元素的旁边弹出层的效果。 
    striker_un的封装效果我感觉很爽，基本上我不怎么改变代码。 
    其它人也给出了很好的解决方法，谢谢。