我在 jsp 中有以下页面。
页面代码如下:
<HTML>
<HEAD>
<META http-equiv=Content-Language content=en-us>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<style TYPE="text/css">
<!-- BODY { font-family:arial,helvetica; margin-left:5; margin-top:0}
A { color:#FF5500; text-decoration:underline}
A:hover,A:active { color:#0055FF; text-decoration:underline}
-->
</style>
<Script Language="JavaScript">
<!--
function inStrGrp(src,reg)
{
var regex=new RegExp("[" + reg + "]","i");
return regex.test(src);
}
function check()
{
var uname=document.scan.elements[0].value
var bError=false
if (uname.length==0)
{
window.alert("Name is required.\n")
return false
}
if (uname.indexOf("\\")>=0)
bError=true
if (inStrGrp(uname,'/.:*?"<>| '))
bError=true
if (bError)
{
window.alert('User name can not contain the following characters:\n \\/. :*?"<>|\n')
return false
}
else
return true
}
-->
</Script>
<title>Enroll New Fingerprint.</title>
</HEAD>
<BODY onload="document.scan.name.focus();">
<center>
<table border="0" width="800">
<tr>
<td width="100%" colspan="3">
<p> </p>
<p><u><b>Online Demonstration</b></u></p>
<div align="center">
<table border="1" width="100%" height="260">
<tr>
<td width="20%" align="center" rowspan="2">
<p> </p>
<p><font color="#0055FF">Enroll</font></p>
<p><a href="logon.asp">Logon</a></p>
<p> </p>
</td>
<td width="80%" height="30">
<b><i>Enroll Finger</i></b>
</td>
</tr>
<tr>
<td width="80%">
<p>Thanks for your registration. You can enroll two fingers for the name you registered.</p>
<form name="scan" method="POST" action="enroll.jsp" onsubmit="return check()">
<p>Please input your name: <input type="text" name="name" size="20"> </p>
<p>If you want to enroll 2 fingers, please check the box. <input type="checkbox" name="chk2Finger" value="2"> </p>
<p>
<input type="submit" value=" Enroll " name="btnEnroll"></p>
</form>
</td>
</tr>
</table>
</div>
<p> </p>
</td>
</tr>
<tr>
<td width="100%" colspan="3">
<p align="center"><small>Copyright © 2004 Futronic
Technology Company Limited. All Rights Reserved.</small></td>
</tr>
</table>
</center>
</BODY>
</HTML>
当我点击 Enroill 按钮时，我想显示一个弹出窗口，如下所示，带有图像源标签。
我如何在 Jsp 上执行此操作？任何建议都有很大帮助。
最佳答案
这是使用 bootstrap 的代码片段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Online Demonstration</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Online Demonstration</div>
<form name="scan" method="POST" action="enroll.asp">
<div class="panel-body">
<p>Thanks for your registration. You can enroll two fingers for the name you registered.</p>
<div class="row">
<div class="form-group">
<label class="col-md-5">Please input your name:</label>
<div class="col-md-5">
<input type="text" class="form-control" id="UserName"/>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-md-5">If you want to enroll 2 fingers, please check the box.</label>
<div class="col-md-5">
<input type="checkbox" name="chk2Finger" value="2">
</div>
</div>
</div>
<input class="btn btn-default" type="submit" value="Submit">
</div>
</form>
</div>
</div>
<!-- Modal code goes here-->
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<div class="container">
<div class=row>
<img src="" class="img-thumbnail col-lg-2">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- /.modal -->
<script type="text/javascript">
function inStrGrp(src,reg){
var regex=new RegExp("[" + reg + "]","i");
return regex.test(src);
}
$(document).ready(function(){
$('input[type="submit"]').click(function (e) {
e.preventDefault();
var userName = document.getElementById('UserName').value;
var bError=false
if (userName.length==0)
{
window.alert("Name is required.\n")
return false
}
if (userName.indexOf("\\")>=0)
bError=true
if (inStrGrp(userName,'/.:*?"<>| '))
bError=true
if (bError)
{
window.alert('User name can not contain the following characters:\n \\/. :*?"<>|\n')
return false
}
else
$('#myModal').modal('show');
return true
});
});
</script>
</body>
</html>希望对你有帮助，谢谢
关于javascript - JSP点击按钮弹出窗口的方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36759080/