利用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' );

      });

});