Question

我在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>&nbsp;</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>&nbsp;</p>
                <p><font color="#0055FF">Enroll</font></p>
              <p><a href="logon.asp">Logon</a></p>
              <p>&nbsp;</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">&nbsp;&nbsp;&nbsp;&nbsp;</p>
        <p>If you want to enroll 2 fingers, please check the box. <input type="checkbox" name="chk2Finger" value="2">&nbsp;&nbsp;</p>
        <p>&nbsp;
        <input type="submit" value="   Enroll   " name="btnEnroll"></p>
      </form>

            </td>
        </tr>
      </table>
      </div>
      <p>&nbsp;</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上做到这一点？任何建议都有很大帮助。

Answer 1

以下是使用bootstrap

的代码段

＆＃13;

<!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">&times;</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>

＆＃13;

希望它会有所帮助。谢谢

Answer 2

纯粹无法显示弹出窗口并在弹出窗口中显示图像。您可以使用jquery UI对话框进行操作。如果你使用带有模态的bootstrap框架，你可以插入任何你想要的东西，那就太好了。

如何在JSP中单击按钮时显示弹出窗口

2 个答案: