jquery 实现弹出层插件

通过URL 调用WEB SERVICE,xml格式
  Client client = Client.create();
        WebResource webResource = client.resource(URL);
        MultivaluedMap queryParams = new MultivaluedMapImpl();
        String param="asx.wbc";//参数
        queryParams.add("security",param);
        securityDetailList = webResource.queryParams(queryParams).get(SecurityDetailModelList.class);//get data from web service
        Collections.sort(securityDetailList, new Comparator(){//order by code
          public int compare(Object a, Object b) { 
            String one = ((SecurityDetailModel)a).getSecurity(); 
            String two = ((SecurityDetailModel)b).getSecurity ();  
            return one.compareTo(two) ;  
           } 
        });  

弹出层JS
   function windowPop(){
                   tipsWindown("Code Loop Up","url:get?${ctx}/public/codeSearch.jsp?param=5","550","400","true","","true","text");
            }

底层JS

///-------------------------------------------------------------------------
//jQuery bring up window
//--------------------------------------------------------------------------
/*parameter
----------------------------------------------------------------------------
    title:
  content:The content can be { text | id | img | url | iframe }
    width:The window's width
   height:The window's height
    drag: Whether you can drag.ture is yes ,false is no
     time:Automatic closing time
   showbg:[optional] set whether to display the mask layer (0 not for display,1displays )
  cssName:[ optional ] additional class name
------------------------------------------------------------------------*/
//example:
//------------------------------------------------------------------------
//simpleWindown("title","text:content","500","400","true","3000","0","css")
//------------------------------------------------------------------------

var showWindown = true;
function tipsWindown(title,content,width,height,drag,time,showbg,cssName) {
$("#windown-box").remove();
var width = width>= 2000?this.width=2000:this.width=width;    
var height = height>= 1000?this.height=1000:this.height=height; 
        var param=content.substring(content.indexOf("=")+1,content.length);//
if(showWindown == true) {
var simpleWindown_html = new String;
simpleWindown_html = "<div id="windownbg" style=""></div>";
simpleWindown_html += "<div id="windown-box">";
simpleWindown_html += "<div id="windown-title"><h2></h2></div>";
                        simpleWindown_html += "<div id="windown-top-title"><h1>Enter all or part the name or code.</h1></div>";
                        simpleWindown_html += "<div id="windown-top style=">
<form method="post" action="%24%7Bctx%7D/uma.wealthdirect/transact/CodeSearch.action"></form>&amp;nbsp"
                        simpleWindown_html +="<input type="hidden" id="searchType" value='"+param+"'><input type="text" id="searchParam">&amp;nbsp<img src="/uma.wealthdirect/public/img/Go.png" style="cursor: pointer;" name="research">
</div>"
                        simpleWindown_html += "<div id="windown-top-space" class="windown-top-space"></div>";
                        simpleWindown_html += "<div id="windown-content-border"><div id="windown-content"></div></div>";
                        simpleWindown_html += "<div id="windown-bottom" class="windown-bottom"><img src="/uma.wealthdirect/public/img/Close.png" style="cursor: pointer;" name="research"></div>";
simpleWindown_html += "<div id='\"windown-bottom-space\"'></div>";
                        simpleWindown_html += "</div>";
$("body").append(simpleWindown_html);
show = false;
}
contentType = content.substring(0,content.indexOf(":"));
content = content.substring(content.indexOf(":")+1,content.length);
switch(contentType) {
case "text":
$("#windown-content").html(content);
break;
case "id":
$("#windown-content").html($("#"+content+"").html());
break;
case "img":
$("#windown-content").html(content);
$.ajax({
error:function(){
$("#windown-content").html("<p class="windown-error">");
},
success:function(html){
$("#windown-content").html("<img src="+content+" alt="">");
}
});
break;
case "url":
var content_array=content.split("?");

$.ajax({
type:content_array[0],
url:content_array[1],
data:content_array[2],
error:function(){
$("#windown-content").html("</p>
<p class="windown-error">load error...</p>");
},
success:function(html){
$("#windown-content").html(html);
}
});
break;
case "iframe":

$.ajax({
error:function(){
$("#windown-content").html("<p class="windown-error">load error...</p>");
},
success:function(html){
$("#windown-content").html("&lt;iframe src="%5C%22%22+content+%22%5C%22" width='\"100%\"' height='\""+parseInt(height)+"px"+"\"' scrolling='\"auto\"' frameborder='\"0\"' marginheight='\"0\"' marginwidth='\"0\"'&gt;&lt;/iframe&gt;");
}
});
}
$("#windown-title h2").html(title);
if(showbg == "true") {$("#windownbg").show();}else {$("#windownbg").remove();};
$("#windownbg").animate({opacity:"0"},"normal");
$("#windown-box").show();
if( height &gt;= 527 ) {
$("#windown-title").css({width:(parseInt(width)+22)+"px"});
$("#windown-content").css({width:(parseInt(width)+17)+"px",height:height+"px"});
}else {
$("#windown-title").css({width:(parseInt(width)+10)+"px"});
$("#windown-content").css({width:width+"px",height:height+"px"});
}
var cw = document.documentElement.clientWidth,ch = document.documentElement.clientHeight,est = document.documentElement.scrollTop;
var _version = $.browser.version;
if ( _version == 6.0 ) {
$("#windown-box").css({left:"50%",top:(parseInt((ch)/2)+est)+"px",marginTop: -((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"});
}else {
$("#windown-box").css({left:"50%",top:"50%",marginTop:-((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"});
};
var Drag_ID = document.getElementById("windown-box"),DragHead = document.getElementById("windown-title");

var moveX = 0,moveY = 0,moveTop,moveLeft = 0,moveable = false;
if ( _version == 6.0 ) {
moveTop = est;
}else {
moveTop = 0;
}
var sw = Drag_ID.scrollWidth,sh = Drag_ID.scrollHeight;
DragHead.onmouseover = function(e) {
if(drag == "true"){DragHead.style.cursor = "move";}else{DragHead.style.cursor = "default";}
};
DragHead.onmousedown = function(e) {
if(drag == "true"){moveable = true;}else{moveable = false;}
e = window.event?window.event:e;
var ol = Drag_ID.offsetLeft, ot = Drag_ID.offsetTop-moveTop;
moveX = e.clientX-ol;
moveY = e.clientY-ot;
document.onmousemove = function(e) {
if (moveable) {
e = window.event?window.event:e;
var x = e.clientX - moveX;
var y = e.clientY - moveY;
if ( x &gt; 0 &amp;&amp;( x + sw  0 &amp;&amp; (y + sh




   
         &lt;script type="text/javascript"&gt;
            //button for the research
            function researchAction(){
                searchParam= $.trim($("#searchParam").val());
                var length=searchParam.length;
                if(length&lt;3){
                     $("#result").html('&lt;span class="error"&gt;Please enter at least two characters.&lt;/span&gt;');
                      return false;
                 }
                 $("#windown-bottom").show();
                 $.ajax({
                    type:"post",
                    url:"${ctx}/uma.wealthdirect/transact/CodeSearch.action",
                    data:"searchParam="+searchParam,
                    success:function(data){
                        var dataObj=eval("("+data+")");
                        var lis="";
                        var asxCodeParam="";
                        if(dataObj.length==0){
                            $("#result").html('&lt;span class="error"&gt;This asset cannot be found.&lt;/span&gt;');
                             return false;
                        }
                        lis+="&lt;table class='asxCode' width='100%'&gt;&lt;tr id='trBackGround'&gt;&lt;td align='left'&gt;Select from the list below&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;"
                        lis+="&lt;tr id='trBackGround1'&gt;&lt;td align='left'&gt;Code";
                        lis+="&lt;\/td&gt;&lt;td align='left'&gt;Description&lt;\/td&gt;&lt;\/tr&gt;"; 
                        for(var i=0;i&lt;dataObj.length;i++){
                            var dataObject=dataObj[i];
                            var code=dataObject.security;
                            var str="'"+code+"'";
                            lis+="&lt;tr&gt;&lt;td align='left'&gt;&lt;a class='underLine' onclick=dbClickTr("+str+")&gt;"; 
                            lis+=code;
                            asxCodeParam+=dataObject.security;
                            lis+="&lt;/a&gt;&lt;\/td&gt;&lt;td align='left'&gt;";   
                            lis+=dataObject.issuerName;
                            lis+="&lt;\/td&gt;&lt;\/tr&gt;";  
                        }
                        $("#asxCodeParam").val(asxCodeParam);
                        lis+=" &lt;\/table&gt;";
                        $("#result").html(lis);  
                        trChangeColor();
                    }
                })
            }
            //button for the cancel
            function closeWindow(){
                $("#windownbg").remove();
                $("#windown-box").fadeOut("slow",function(){$(this).remove();});
            }
            //click the link
            function dbClickTr(code){
                 $("#asxCodeParam").val(code);
                selectResult();
            }
            //change the table color
            function trChangeColor(){
                $(".asxCode tr:odd").addClass("odd");
                $(".asxCode tr:even").addClass("even");
                $(".asxCode tr").hover(function(){
                     $(this).removeClass("even");
                     $(this).toggleClass("hover");
                },function(){
                    $(this).toggleClass("hover");
                    $(".asxCode tr:odd").addClass("odd");
                    $(".asxCode tr:even").addClass("even");
                })
            }
           
           
        &lt;/script&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
<title>Code Loop Up</title>
<form action="%24%7Bctx%7D/uma.wealthdirect/transact/CodeSearch.action" method="post">
<div id="showType">
                &lt;hidden name="asxCodeParam" id="asxCodeParam"&gt;&lt;/hidden&gt;</div>
        </form>

        <div id="result">

        </div>