How to show pop-up on button click in JSP
Question
I have the following page in 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> </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>
When I click on Enroill button I want to show a pop-up like as following with an image source tag .
How can I do this on Jsp ? Any advice is of great help .
2 answers
solution1
1 2016-04-21 08:56:22
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">×</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
solution2
0 2016-04-21 07:28:40
With pure its not possible to show pop up and show image on that pop up.You can do it with jquery UI dialog . And it will be great if you use bootstrap framework which have modal where you can insert anything you want.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Click a button and show pop-up window without using Alert()
How to make pop-up div hide/show on click
Display a pop-up on radio button click
Cannot click on the pop-up button
How to show Facebook like pop-up?
what is the best way to show the pop-up on click of an image?
Javascript code to open pop-up window on button click?
Fade out pop-up window on click of a button?
How to show populated rich view in the pop-up for preview on click action
HTML button doesn't show pop-up
Related Tags