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

Question

I have the following page in jsp .我在 jsp 中有以下页面。

The code of the page is as following :页面代码如下：

<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>

When I click on Enroill button I want to show a pop-up like as following with an image source tag .当我点击 Enroill 按钮时，我想显示一个带有图像源标签的弹出窗口，如下所示。

How can I do this on Jsp ?我怎样才能在 Jsp 上做到这一点？ Any advice is of great help .任何建议都有很大帮助。

Answer 1

Here is code snippet using 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">&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>

Hope it will help.Thanks希望它会有所帮助。谢谢

Answer 2

With pure its not possible to show pop up and show image on that pop up.You can do it with jquery UI dialog .纯它不可能显示弹出窗口并在弹出窗口上显示图像。您可以使用 jquery UI 对话框来完成。 And it will be great if you use bootstrap framework which have modal where you can insert anything you want.如果您使用具有模态的引导框架，您可以在其中插入任何您想要的内容，那将会很棒。

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

问题描述

2 个解决方案

解决方案1
1 2016-04-21 08:56:22

解决方案2
0 2016-04-21 07:28:40

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

问题描述

2 个解决方案

解决方案1 1 2016-04-21 08:56:22

解决方案2 0 2016-04-21 07:28:40

解决方案1
1 2016-04-21 08:56:22

解决方案2
0 2016-04-21 07:28:40