Js Jquery創(chuàng)建一個(gè)彈出層可加載一個(gè)頁(yè)面

字號(hào):


    Js Jquery創(chuàng)建一個(gè)彈出層,當(dāng)加載一個(gè)頁(yè)面進(jìn)彈出層時(shí)出現(xiàn)亂碼,示例代碼如下,大家可以參考參考
    代碼如下:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title> New Document </title>
    <script type="text/javascript" src="../jquery-1.7.2.js"></script>
    <script type="text/javascript">
    //創(chuàng)建一個(gè)彈出層,title 標(biāo)題,width 寬度,height 高度,content 內(nèi)容,url 如果url不為空時(shí)則覆蓋content加載url頁(yè)面中的內(nèi)容
    function CreatePopLayerDiv(title,width,height,content,url){
    var titles = title || "標(biāo)題";
    var Iheight=$(window).height();
    var Iwidth =$(window).width();
    var heights = height || 300;
    var widths = width || 500;
    var Oheight= (Iheight -heights) / 2;
    var Owidth = (Iwidth - widths) /2;
    var contents = content || "內(nèi)容";
    var div = "<div id='InDiv' style='width:"+Iwidth+"px;height:"+Iheight+"px;background-color:#888;position:absolute;z-index:10000;top:0;left:0;opacity:0.7;'><div id='offDiv' style='width:"+widths+"px;height:"+heights+"px;left:"+Owidth+"px;top:"+Oheight+"px;background-color:white;position:absolute;z-index:10001;'><h4 id='HTitle' style='margin:0px;padding:3px;background:#336699;opacity:0.9;border:1px solid ##336699;height:20px;line-height:20px;font:12px Verdana, Geneva, Arial, Helvetica, sans-serif;color:white;cursor:pointer;text-align:left;'>"+titles+"<a id='AClose' onclick='btnCloses()' style='float:right;'>關(guān)閉</a></h4><div id='Content'>"+contents+"</div></div></div>";
    $(document.body).append(div);
    if(url != ""){
    $("#Content").load(url);
    }
    }
    //移除彈出層
    function RemoveDiv(){
    $("#AClose").remove();
    $("#HTitle").remove();
    $("#offDiv").remove();
    $("#InDiv").remove();
    }
    $(function(){
    $("#btnTCC").click(function(){
    CreatePopLayerDiv("閃耀的瞬間",600,400,"彈出層","table偶數(shù)行變色.html");
    });
    })
    function btnCloses(){
    RemoveDiv();
    }
    </script>
    </head>
    <body>
    <input type="button" id="btnTCC" value="彈出層" />
    </body>
    </html>