js弹出框

js文件>>>>>>

<script type="text/javascript">
//用来记录要显示的DIV的ID值  
var EV_MsgBox_ID=""; //重要  
 
//弹出对话窗口(msgID-要显示的div的id)  
function EV_modeAlert(msgID){ 
    //创建大大的背景框  
   var bgObj=document.createElement("div"); 
    bgObj.setAttribute('id','EV_bgModeAlertDiv'); 
    document.body.appendChild(bgObj); 
    //背景框满窗口显示  
    EV_Show_bgDiv(); 
    //把要显示的div居中显示  
    EV_MsgBox_ID=msgID; 
    EV_Show_msgDiv(); 

 
//关闭对话窗口  
function EV_closeAlert(){ 
    var msgObj=document.getElementById(EV_MsgBox_ID); 
    var bgObj=document.getElementById("EV_bgModeAlertDiv"); 
    msgObj.style.display="none"; 
    document.body.removeChild(bgObj); 
    EV_MsgBox_ID=""; 

 
//窗口大小改变时更正显示大小和位置  
window.οnresize=function(){ 
    if (EV_MsgBox_ID.length>0){ 
        EV_Show_bgDiv(); 
        EV_Show_msgDiv(); 
   } 

 
//窗口滚动条拖动时更正显示大小和位置  
window.οnscrοll=function(){ 
    if (EV_MsgBox_ID.length>0){ 
        EV_Show_bgDiv(); 
        EV_Show_msgDiv(); 
    } 

 
//把要显示的div居中显示  
function EV_Show_msgDiv(){ 
   var msgObj   = document.getElementById(EV_MsgBox_ID); 
    msgObj.style.display  = "block"; 
    var msgWidth = msgObj.scrollWidth; 
    var msgHeight= msgObj.scrollHeight; 
    var bgTop=EV_myScrollTop(); 
    var bgLeft=EV_myScrollLeft(); 
    var bgWidth=EV_myClientWidth(); 
    var bgHeight=EV_myClientHeight(); 
   var msgTop=bgTop+Math.round((bgHeight-msgHeight)/2); 
    var msgLeft=bgLeft+Math.round((bgWidth-msgWidth)/2); 
    msgObj.style.position = "absolute"; 
    msgObj.style.top      = msgTop+"px"; 
    msgObj.style.left     = msgLeft+"px"; 
    msgObj.style.zIndex   = "10001"; 
    

//背景框满窗口显示  
function EV_Show_bgDiv(){ 
   var bgObj=document.getElementById("EV_bgModeAlertDiv"); 
    var bgWidth=EV_myClientWidth(); 
    var bgHeight=EV_myClientHeight(); 
    var bgTop=EV_myScrollTop(); 
   var bgLeft=EV_myScrollLeft(); 
    bgObj.style.position   = "absolute"; 
    bgObj.style.top        = bgTop+"px"; 
   bgObj.style.left       = bgLeft+"px"; 
    bgObj.style.width      = bgWidth + "px"; 
    bgObj.style.height     = bgHeight + "px"; 
    bgObj.style.zIndex     = "10000"; 
    bgObj.style.background = "#777"; 
    bgObj.style.filter     = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60,finishOpacity=60);"; 
    bgObj.style.opacity    = "0.6"; 

//网页被卷去的上高度  
function EV_myScrollTop(){ 
    var n=window.pageYOffset  
    || document.documentElement.scrollTop  
    || document.body.scrollTop || 0; 
    return n; 

//网页被卷去的左宽度  
function EV_myScrollLeft(){ 
    var n=window.pageXOffset  
    || document.documentElement.scrollLeft  
    || document.body.scrollLeft || 0; 
    return n; 

//网页可见区域宽  
function EV_myClientWidth(){ 
    var n=document.documentElement.clientWidth  
    || document.body.clientWidth || 0; 
    return n; 

//网页可见区域高  
function EV_myClientHeight(){ 
    var n=document.documentElement.clientHeight  
    || document.body.clientHeight || 0; 
   return n; 
}
</script>

==============================以上是js文件========================

 

=

========================jsp文件=======================

<%@include file="../../common/pubCommon.jsp" %>
<%@include file="../../common/myshow.jsp" %>
<body class="body">
 <table width="100%" border="0" cellspacing="0" cellpadding="1">
     <tr>
        <td height="30" class="address">&nbsp;&middot;当前位置:权限管理&gt;&gt;业务系统管理&gt;&gt;业务系统查询</td>
     </tr>
 </table>
  
 <form name="form1" id="form1"  action="queryAppRoleInfoSubmit.do" method="post">
 
  <div class="result">
   <div class="p_b10">
    <table width="95%" border="0" cellspacing="0" cellpadding="0" class="inquiretable">
     <tr>
      <th width="10%">关联业务系统:</th>
      <td width="18%">
        <select name="appId" id="appId"  class="selectstyle i_w160">
         <c:forEach var="app" items="${ appList }" varStatus="s">
          <option value="<c:out value="${app.id}"/>" <c:if test="${ not empty command && command.appId ==  app.id }">selected</c:if>  >
           <c:out value="${app.name }"/>
          </option>
         </c:forEach>
        </select>
        
        <a href="javascript:void(0);" οnclick="return false;" id="submitButton" class="button_a_blue"><span>查询</span></a>
        <a href="javascript:void(0);" οnclick="return false;" id="addAppButton" class="button_a_blue"><span>新增业务系统</span></a>
      </td>
     </tr>
    </table>
   </div>
   
  
   <table align="center" width="95%" border="0" cellspacing="1" cellpadding="0" class="resulttable">
    <tr>
     <th width="10%">业务系统ID</th>
     <th width="10%">角色ID</th>
     <th width="30%">角色名称</th>
     <th width="35%">角色备注</th>
     <th width="10%">操作</th>
    </tr>
    <c:if test="${ empty command || empty command.result }">
     <tr><td align="center" colspan="10" class="oddbgc" >无记录</td></tr>
    </c:if>
    
    <c:if test="${ not empty command && not empty command.result }">
     <c:forEach var="bean" items="${ command.result }" varStatus="s">
      <tr>
       <td align="center" class="<c:choose ><c:when test='${s.index%2 ==0}'>oddbgc</c:when><c:otherwise>evenbgc</c:otherwise></c:choose>">
        <c:out value="${bean.appId }"/>
       </td>
       <td align="center" class="<c:choose ><c:when test="${s.index%2 ==0}">oddbgc</c:when><c:otherwise>evenbgc</c:otherwise></c:choose>">
        <c:out value="${bean.roleId }"/>
       </td>
       <td align="center" class="<c:choose ><c:when test="${s.index%2 ==0}">oddbgc</c:when><c:otherwise>evenbgc</c:otherwise></c:choose>">
        <c:out value="${bean.roleName }"/>
       </td>
       <td align="center" class="<c:choose ><c:when test="${s.index%2 ==0}">oddbgc</c:when><c:otherwise>evenbgc</c:otherwise></c:choose>">
        <c:out value="${bean.roleRemark }"/>
       </td>
       <td align="center" class="<c:choose ><c:when test="${s.index%2 ==0}">oddbgc</c:when><c:otherwise>evenbgc</c:otherwise></c:choose>">
        <a href="javascript:void(0);" οnclick="delAppRole('<c:out value="${bean.appId }"/>' , '<c:out value="${bean.roleId }"/>');return false;"
         class="button_a_blue"><span>删 除</span></a>
         
       <!-- 添加“编辑按钮”,该按钮只在卡种为“借记卡”时显示 -->
       <c:if test="${command.appId =='10009'}">
        <a href="javascript:void(0);" οnclick="EV_modeAlert('envon')"  class="button_a_blue"><span>编辑</span></a>
       </c:if>
       </td>
      </tr>
      
     </c:forEach>
    </c:if>
    <tr><td align="right" colspan="10" class="evenbgc" >
      <a href="javascript:void(0);" οnclick="return false;" id="addAppRoleButton" class="button_a_blue"><span>添加业务系统角色</span></a>
    </td></tr>

   </table>
   
  </div>
  
 </form>
 
 <form name="form2" id="form2"  action="delAppRoleInfoSubmit.do" method="post">
  <input type="hidden" id="delAppRoleAppId" name="appId" />
  <input type="hidden" id="delAppRoleRoleId" name="roleId" />
 </form>
 
 <form name="form3" id="form3"  action="addAppRoleInfoFrom.do" method="post">
  <input type="hidden" id="addAppRole_appId" name="id" value='<c:out value="${command.appId }"/>' /> 
 </form>
<div id="envon" style=" width:800px; background-color:#FFFFFF; border:1px solid #000000; padding:20px; overflow:hidden; display:none;">
   <table align="center" width="95%"  border="0" cellspacing="0" cellpadding="0" class="inquiretable">
    <tr ><th width="100%" align="left">卡种信息:</th></tr>
   </table>
   <table align="center" width="95%" border="0" cellspacing="1" cellpadding="0" class="resulttable">
    <tr>
     <th width="12%">业务系统</th>
     <th width="80%">角色</th>
    </tr>
    <tr>
     <td>贷贷卡</td>
     <td><input type="checkbox"  value=""/>白金卡(SHIGANG)
      <input type="checkbox"  value=""/>金卡(admin)
      <input type="checkbox"  value=""/>钻石金卡(superadmin)
     </td>
    </tr>
    <tr>
     <td>信用卡</td>
     <td><input type="checkbox"  value=""/>普能卡(user)
         <input type="checkbox"  value=""/>金卡(user)</td>
    </tr>
    <tr>
     <td>平安卡</td>
     <td>
     <input type="checkbox"  value=""/>白金卡(SHIGANG)
      <input type="checkbox"  value=""/>金卡(admin)
     </td>
    </tr>
    <tr>
     <td>存蓄卡 </td>
     <td><input type="checkbox"  value=""/>普能卡(user)</td>
    </tr>
    <tr>
     <td>银联卡</td>
     <td><input type="checkbox"  value=""/>白金卡(SHIGANG)
      <input type="checkbox"  value=""/>金卡(admin)
      <input type="checkbox"  value=""/>钻石金卡(superadmin) </td>
    </tr>
    <tr>
     <td>贷款卡 </td>
     <td><input type="checkbox"  value=""/>金卡(admin)
      <input type="checkbox"  value=""/>钻石金卡(superadmin)
      </td>
    </tr>
    <tr>
     <td>消费卡</td>
     <td><input type="checkbox"  value=""/>金卡(admin)
      <input type="checkbox"  value=""/>钻石金卡(superadmin)
     </td>
    </tr>
    <tr>
     <td>借记卡 </td>
     <td><input type="checkbox"  value=""/>金卡(admin)
      <input type="checkbox"  value=""/>钻石金卡(superadmin)</td>
    </tr>
   </table> 
   <table align="center" width="95%"  border="0" cellspacing="0" cellpadding="0" class="inquiretable">
    <tr >
     <td width="100%" align="center" >
      <a href="javascript:void(0);" οnclick="EV_closeAlert();" id="addUserButton1" class="button_a_blue"><span>确 定</span></a>
        <a href="javascript:void(0);" οnclick="EV_closeAlert()" id="backButton1" class="button_a_blue"><span>返 回</span></a>  
      
     </td>
    </tr>
   </table>
</div>
</body>

<script type="text/javascript">
<!--
 <% //删除业务系统角色   %>
 function delAppRole(appid,roleid){
  if (!confirm('确定要删除该角色信息吗?') ){
   return false;
  }
  $('#delAppRoleAppId').val( appid );
  $('#delAppRoleRoleId').val( roleid );
  
  showWaitDialog();
   $('#form2').submit();
   return false;
 }
 
$(document).ready(function(){
 <% //查询   %>
 function submitQuery(){
  showWaitDialog();
   $('#form1').submit();
   return false;
 };

 $('#submitButton').click( submitQuery );
 $('#addAppButton').click( function(){  showWaitDialog(); document.location = 'addAppInfoFrom.do'; } );
 $('#addAppRoleButton').click( function(){ 
  showWaitDialog();
  $('#form3').submit();
   return false;
 } );
 
});
//-->
</script>

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值