jquery 弹出div

ajax请求返回data(html)
当获得点击事件时把data apend到指定div中
然后弹出div使背景变灰

解决方案 »

  1.   

    简单写了下：<body>
    <div id="div1" style="width:2000px;height:2000px">
            <div>
                <div></div>
            </div>
    <input type="button" id="btn1" value="层出来" />
    </div>
    </body>
    <script type="text/javascript" src="jquery-1.3.2-min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var de=document.compatMode=="CSS1Compat"?document.documentElement:document.body;
        $("#btn1").click(function() {
            if($("#layer1").size()>0) {
                $("#layer1").css("display","block");
            } else {
                var div=document.createElement("div");
                div.id="layer1";
                div.style.cssText="position:absolute;z-index:999;top:0;left:0;opacity:0.5;filter:alpha(opacity=50);background:#999999";
                div.style.width=Math.max(de.offsetWidth,de.scrollWidth)+"px";
                div.style.height=Math.max(de.offsetHeight,de.scrollHeight)+"px";document.title=de.offsetHeight+"|"+de.scrollHeight;
                
                var layer=document.createElement("div");
                layer.style.cssText="position:fixed;_position:absolute;z-index:1000;width:400px;height:280px;background:#FFFFFF;border:solid 1px #09c;";
                layer.innerHTML="<p>弹出层<p><span style='float:right;cursor:pointer;margin:5px 7px;'>关闭</span><input type='text'/>";      
                div.appendChild(layer); 
                document.body.appendChild(div);
                
                layer.style.left=(de.clientWidth-layer.clientWidth)/2 +'px';
                layer.style.top=(de.clientHeight-layer.clientHeight)/2 +'px'
                
                $("span",layer).click(function() {
                    $("#layer1").css("display","none");
                });
            }        
            
        });
    });
    </script>
      

  2.   

    $.ajax({
    url:'test.html',
    type: "GET",
    dataType: "html",
    success: function (data){
                 //怎么把data通过类似1楼的方法处理添加到弹出来的层里，大小是自动的
    }
    });
      

  3.   

    $.ajax({ 
    url:'test.html', 
    type: "GET", 
    dataType: "html", 
    success: function (data){ 
                
    if($("#layer1").size()>0) {
                $("#layer1").css("display","block");
            } else {
                var div=document.createElement("div");
                div.id="layer1";
                div.style.cssText="position:absolute;z-index:999;top:0;left:0;opacity:0.5;filter:alpha(opacity=50);background:#999999";
                div.style.width=Math.max(de.offsetWidth,de.scrollWidth)+"px";
                div.style.height=Math.max(de.offsetHeight,de.scrollHeight)+"px";document.title=de.offsetHeight+"|"+de.scrollHeight;
                
                var layer=document.createElement("div");
                layer.style.cssText="position:fixed;_position:absolute;z-index:1000;width:400px;height:280px;background:#FFFFFF;border:solid 1px #09c;";
                $(layer).html(data);
                div.appendChild(layer); 
                document.body.appendChild(div);
                
                layer.style.left=(de.clientWidth-layer.clientWidth)/2 +'px';
                layer.style.top=(de.clientHeight-layer.clientHeight)/2 +'px'
                
                $("span",layer).click(function() {
                    $("#layer1").css("display","none");
                });
            }        
    } 
    });