如何在JSP中按钮点击时显示弹出窗口
问题描述:
我在jsp中有以下页面。如何在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的?任何建议都很有帮助。
答
纯粹它不可能显示弹出和显示图像弹出。您可以使用jQuery UI对话框。 如果你使用引导程序框架,它会有很好的模式,你可以插入任何你想要的东西。
答
下面是使用引导
<!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>
\t <div class="container">
\t \t <div class="panel panel-default">
\t \t \t <div class="panel-heading">Online Demonstration</div>
\t \t \t \t <form name="scan" method="POST" action="enroll.asp">
\t \t \t \t <div class="panel-body">
\t \t \t \t \t <p>Thanks for your registration. You can enroll two fingers for the name you registered.</p>
\t \t \t \t \t <div class="row">
\t \t \t \t \t \t
\t \t \t \t \t \t <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>
\t \t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t </div>
\t \t \t \t
\t \t \t \t \t <div class="row">
\t \t \t \t \t \t <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">
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t </div>
\t \t \t \t \t
</div>
\t \t \t \t \t \t
\t \t \t \t \t </div>
\t \t \t \t \t \t <input class="btn btn-default" type="submit" value="Submit">
</div>
\t \t \t </form> \t
\t \t </div>
\t </div>
\t
<!-- 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">
\t <div class="container">
\t \t <div class=row>
\t \t <img src="" class="img-thumbnail col-lg-2">
\t </div>
\t </div>
\t
</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 --> \t
\t <script type="text/javascript">
\t function inStrGrp(src,reg){
\t \t var regex=new RegExp("[" + reg + "]","i");
\t \t return regex.test(src);
\t }
$(document).ready(function(){
\t \t $('input[type="submit"]').click(function (e) {
\t \t \t \t e.preventDefault();
\t \t \t \t var userName = document.getElementById('UserName').value;
\t \t \t \t var bError=false
\t \t \t if (userName.length==0)
\t \t \t {
\t \t \t \t window.alert("Name is required.\n")
\t \t \t \t return false
\t \t \t }
\t \t \t if (userName.indexOf("\\")>=0)
\t \t \t \t bError=true
\t \t \t if (inStrGrp(userName,'/.:*?"<>| '))
\t \t \t \t bError=true
\t \t \t if (bError)
\t \t \t {
\t \t \t \t window.alert('User name can not contain the following characters:\n \\/. :*?"<>|\n')
\t \t \t \t return false
\t \t \t }
\t \t \t else
\t \t \t \t $('#myModal').modal('show');
\t \t \t \t return true
\t \t
\t \t });
\t });
\t
\t </script>
\t
\t
</body>
</html>
希望它会help.Thanks
帮我做到这一点使用引导程序代码段 –