如何在 JSP 中單擊按鈕時顯示彈出窗口
[英]How to show pop-up on button click in 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 上做到這一點？ 任何建議都有很大幫助。
2 個解決方案
解決方案1
1 2016-04-21 08:56:22
這是使用引導程序的代碼片段
<!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>
希望它會有所幫助。謝謝
解決方案2
0 2016-04-21 07:28:40
純它不可能顯示彈出窗口並在彈出窗口上顯示圖像。您可以使用 jquery UI 對話框來完成。 如果您使用具有模態的引導框架，您可以在其中插入任何您想要的內容，那將會很棒。
如何在彈出窗口中顯示填充的豐富視圖，以便在單擊操作時進行預覽
[英]How to show populated rich view in the pop-up for preview on click action
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.