Bootstrap-如何使用JSP实现模式弹出窗口 [英] Bootstrap - How to realize an modal popup with JSP
问题描述
我正在尝试使用Spring MVC通过JSP实现模式弹出窗口.
I'm trying to realize an modal popup with JSP, using Spring MVC.
在我的 index.jsp 中，我有这个href链接:
In my index.jsp I have this href link:
<a href="findCompany" data-toggle="modal"data-target="#findCompany">Find company</a>
，并且，始终在此.jsp 中，有以下代码片段:
and, always in this .jsp, there is this code fragment:
<div class="modal fade" id="findCompany" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
当我单击查找公司 href链接时，我的@Controller会将我重定向到findCompany.jsp，其中包含用于查找公司的表格.
When I click on find company href link, my @Controller redirects me in findCompany.jsp, where there is the form for find a company.
这是此.jsp的代码:
Here's the code of this .jsp:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Azienda</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><p>Cerca un'azienda <span class="glyphicon glyphicon-stats"></span></p></h4>
</div>
<div class="modal-body">
<form role="form" action="returnCompany">
<div class="form-group">
<input type="text" class="form-control" name="nomeAzienda" placeholder="Inserisci il nome" required>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">Cerca</button>
</div>
</div>
</body>
</html>
findCompany.jsp显示为模式弹出窗口，这就是我想要的.
findCompany.jsp is shown like an modal popup, and that's is what I want.
好，一切正常.
但是，如果我从index.jsp中删除了这一个，
But, if I remove, from index.jsp, this one:
<div class="modal fade" id="findCompany" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
什么都行不通.
为什么?我对模态类有误.
Why? I'm wrong something with the modal class.
我希望没有最后的代码. 只需链接index.jsp和findCompany.jsp中的模式形式即可.这是可能的? 怎么做?
I wish that this last code there wasn't. Just link in index.jsp and modal form in findCompany.jsp. It's possible? How to?
对不起，英语不好.
谢谢.
推荐答案
请注意链接中的data-target="#findCompany". #findCompany引用带有id="findCompany"的HTML元素.
Note the data-target="#findCompany" in your link. #findCompany refers to an HTML element with id="findCompany".
如果您从页面中删除该元素(即通过删除)
If you delete that element from your page (i.e. by deleting)
<div class="modal fade" id="findCompany" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
该链接将不再具有与其data-target相对应的元素，并且似乎无法正常工作.
The link will no longer have an element corresponding to its data-target and it won't seem to work.
有关什么是data-target以及如何使用它们的信息-您可能想看一下这个问题
For info on what data-targets are and how to use them - you might like to look at this question what-is-the-data-target-in-bootstrap-3
这篇关于Bootstrap-如何使用JSP实现模式弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
