利用lightbox弹出带遮罩层的弹出框

JSP页面如下：

<%@ page language= "java" import = "java.util.*" pageEncoding ="UTF-8" %>

<%

      String path = request.getContextPath();

      String basePath = request.getScheme() + "://"

                  + request.getServerName() + ":" + request.getServerPort()

                  + path + "/" ;

%>

<%@ taglib uri= "/struts-tags" prefix ="s" %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html>

       < head>

             < base href =" <%= basePath%> " />

             < title> My JSP 'departinfo.jsp' starting page </title >

             < meta http-equiv ="pragma" content= "no-cache" />

             < meta http-equiv ="cache-control" content= "no-cache" />

             < meta http-equiv ="expires" content= "0" />

             < meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" />

             < meta http-equiv ="description" content= "This is my page" />

             < link rel ="stylesheet" type= "text/css" href ="css/common.css" />

             < link rel ="stylesheet" type= "text/css"

                   href ="css/empdepskillpermissionmgr/depart.css" />

             < script type ="text/javascript" src ="js/jquery-1.10.2.min.js" ></ script>

             < script type ="text/javascript" src ="js/jquery.lightbox_me.js" ></ script>

             < script type ="text/javascript"

                   src ="js/empdepskillpermissionmgr/depart.js" ></ script>

       </ head>

       < body>

             < div id= "all" >

                   < div class ="content" >

                         < div class ="contenttop" >

                               < input type ="button" value= "添加部门" class ="button showAddDiv" id= "0" />

                         </ div>

                         < table class ="listtable" >

                               < tr class ="header" align= "center">

                                     < td style ="width: 50%" >

                                          操作

                                     </ td>

                                     < td style ="width: 50%" >

                                          部门名称

                                     </ td>

                               </ tr>

                               < s:iterator value ="departments" >

                                     < tr>

                                           < td class ="contenttd" >

                                                 < a

                                                       href ="employee/queryEmployees.action?queryEmployeeInfo.departId= < s:property value ="id" />"

                                                       class ="process" > 查看成员</ a >

                                                 < a href ="javascript:void(0)" class= "process showAddDiv" id = "< s:property value ="id" />" > 添加下级部门 </a >

                                           </ td>

                                           < td class ="contenttd" >

                                                 < s:property value ="name" />

                                           </ td>

                                     </ tr>

                               </ s:iterator>

                         </ table>

                   </ div>

                   < div id= "addDiv" class = "popwidget">

                         < div class ="popwidgettop" >

                               < span> 添加部门 </span >

                               < img src ="images/close.png" class= "close" />

                         </ div>

                         < form method ="post" >

                               < div class ="popwidgetcontent" >

                                     < table>

                                           < tr>

                                                 < td>

                                                      部门名称

                                                 </ td>

                                                 < td>

                                                       < input type ="text" name ="department.name" class= "text" />

                                                 </ td>

                                           </ tr>

                                           < tr>

                                                 < td></ td >

                                                 < td></ td >

                                           </ tr>

                                     </ table>

                               </ div>

                               < div class ="popwidgetbutton" >

                                     < input type ="button" value= "保存" onclick ="addDepart(this)"

                                           class ="button" />

                                     < input type ="button" value= "取消" id ="cancel" class= "button" />

                               </ div>

                               < input type ="hidden" value= "" name ="department.parentId"

                                     id= "departPID" />

                         </ form>

                   </ div>

                  

             </ div>

       </ body>

</ html>

javascrip脚本

$( function () {

      $( '.showAddDiv' ).click( function(e) {

             var pid = $( this ).attr("id" );

            alert( pid);

            $( '#addDiv' ).lightbox_me( {

                  centered : true ,

                  onLoad : function () {

                        $( '#addDiv' ).find("#departPID" ).val(pid);

                        $( '#addDiv' ).find('input:first' ).focus();

                  }

            });

            e.preventDefault();

      });

      $( "#cancel" ).click( function() {

            $( "#cancel" ).trigger('close' );

      });

});