利用jquery实现遮罩层
js中的代码
var userAgent = navigator.userAgent;
var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Edg") < 0 ;
var isEdge = userAgent.indexOf("Edg") > -1 && userAgent.indexOf("Chrome") > -1;
function popError() { var popurl="http://localhost:8080/combi/index.html?serviceName=APC000&ACT_ID=INIT" //winpops=window.open(popurl, "COMMONPOP", "width=400,height=300,") //showModalDialog(popurl, window, "status:no;dialogWidth:450px;dialogHeight:350px"); var top = (window.screen.availHeight-30-350)/2; var left = (window.screen.availWidth-10-450)/2; if(isChrome && !isEdge){ var childWindow = window.open(popurl, "COMMONPOP", 'width=' + 450 + ',height=' + 350 + ',top=' + top + ',left=' + left); doMaskNoneBack(); $("#maskingArea").click(function(){ if(!childWindow.closed){ childWindow.focus(); } }); }else if(isEdge){ var childWindow = window.open(popurl, "COMMONPOP", 'width=' + 450 + ',height=' + 350 + ',top=' + top + ',left=' + left); doMaskNoneBack(); $("#maskingArea").click(function(){ if(!childWindow.closed){ childWindow.focus(); } }); }else{ showModalDialog(popurl, window, "status:no;dialogWidth:450px;dialogHeight:350px"); dialogOpenFlg = 0; return result; } //window.open(popurl,"APC110","width=400,height=300,"); }
JSP代码
<%@ page contentType="text/html; charset=Shift_JIS" %><html>
<%@ include file="INCLUDE_HEADDER.JSP" %>
<html>
<head>
<title>Combi Corporation</title>
<META http-equiv=Content-Type content="text/html; charset=Shift_JIS">
<link rel="stylesheet" type="text/css" href="jsp/common/common.css">
<script type="text/javascript" src="jsp/common/common.js"></SCRIPT>
<script src="jsp/common/jquery-3.6.0.js"></script>
<script type="text/javascript" src="jsp/common/jquery.loadmask.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function popchk() {
if (<%= sdh.isPopUp() %>) {
popError();
}
}
</SCRIPT>
</head>
<body onload="javascript:popchk()">
<div id ="maskingArea">
<form name="frmAPL000" action="<%= jp.co.moss.svr.MOSSConstURL.getURL("CONTROLER_NAME") %>" method="POST">
<div style="width:1850px;height:930px;">
<input type="hidden" name="serviceName" value="APL000">
<!-- TOP START -->
<table cellSpecing=0 cellPadding=0 width=100% border=0>
<tr>
<td> <IMG height=10 src="jsp/picture/space.gif" width=20></td>
<td><IMG height=45 src="jsp/picture/logo_ap.gif" width=720></td>
<td><IMG height=5 src="jsp/picture/space.gif" width=10></td>
</tr>
<tr>
<td><IMG height=5 src="jsp/picture/space.gif" width=20></td>
<td><IMG height=6 src="jsp/picture/topline.gif" width=100%></td>
<td><IMG height=4 src="jsp/picture/space.gif" width=10></td>
</tr>
</table>
<!-- TOP END -->
<br>
<!-- SUB TOP START -->
<table cellSpecing=0 cellPadding=0 width=100% border=0>
<tr>
<td width=95% align='right'>ログイン</td>
<td><IMG height=5 src="jsp/picture/space.gif" width=10></td>
</tr>
</table>
<!-- SUB TOP END -->
<br><br>
<!-- MAIN TABLE START ---------------------->
<table cellSpecing=0 cellPadding=0 width=300 border=0 align='CENTER'>
<tr>
<td colspan="2">ユーザIDとパスワードを入力してください。</td>
</tr>
<tr height='15'>
<td colspan='8'></td>
</tr>
<tr>
<td width=100 align='right'>
<table width="120" border="0" cellspacing="0" cellpadding="1" class='ORALN'>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="3" class='ORABG'>
<tr>
<td align='CENTER' class='ORA12'>ユーザID</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
<input type="text" name="txtUserId" value="<%= ds.getItem(jp.co.combi.biz.APL000.L0_USER_ID) %>" maxlength='12' class="input_txt" STYLE='width:150;height:25;ime-mode:disabled;'><!-- ユーザID -->
</td>
</tr>
<tr height='5'>
<td colspan='8'></td>
</tr>
<tr>
<td width=100 align='right'>
<table width="120" border="0" cellspacing="0" cellpadding="1" class='ORALN'>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="3" class='ORABG'>
<tr>
<td align='CENTER' class='ORA12'>パスワード</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
<input type="password" name="txtUserPwd" value="" maxlength='12' class="input_txt" STYLE='width:150;height:25;ime-mode:disabled;'><!-- パスワード -->
</td>
</tr>
<tr>
<td><br><br></td>
</tr>
<tr>
<td align='right' colspan="2">
<input type='submit' name='btnLogin' value='ログイン' style='width:90;height:27;' class="input_txt">
<input type='button' name='btnExit' value='閉じる' style='width:90;height:27;' onClick="javascript:window.close();" class="input_txt">
</td>
</tr>
</table>
</div>
<!--MAIN TABLE END ---------------------->
</form>
</div>
</body>
</html>
