twitter-bootstrap Bootstrap - 如何用 JSP 实现模态弹窗
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28480109/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap - How to realize an modal popup with JSP
提问by Dave
I'm trying to realize an modal popup with JSP, using Spring MVC.
我正在尝试使用 Spring MVC 使用 JSP 实现模态弹出窗口。
In my index.jspI have this href link:
在我的index.jsp 中，我有这个 href 链接：
<a href="findCompany" data-toggle="modal"data-target="#findCompany">Find company</a>
and, always in this .jsp, there is this code fragment:
而且，总是在这个 .jsp 中，有这个代码片段：
<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>
When I click on find companyhref link, my @Controller redirects me in findCompany.jsp, where there is the form for find a company.
当我单击find companyhref 链接时，我的@Controller 将我重定向到 findCompany.jsp，其中有用于查找公司的表单。
Here's the code of this .jsp:
这是这个 .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 is shown like an modal popup, and that's is what I want.
findCompany.jsp 显示为一个模态弹出窗口，这就是我想要的。
Ok, everything works.
好的，一切正常。
But, if I remove, from index.jsp, this one:
但是，如果我从 index.jsp 中删除这个：
<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>
nothing works.
没有任何效果。
Why? I'm wrong something with the modal class.
为什么？我错了模态类。
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?
我希望最后一个代码没有。只需在 index.jsp 和 findCompany.jsp 中的模态形式中进行链接即可。这是可能的？如何？
Sorry for bad english.
抱歉英语不好。
Thanks.
谢谢。
回答by J Richard Snape
Note the data-target="#findCompany"in your link. #findCompanyrefers to an HTML element with id="findCompany".
请注意data-target="#findCompany"链接中的 。 #findCompany指带有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>
The link will no longer have an element corresponding to its data-targetand 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
有关data-targets 是什么以及如何使用它们的信息 - 您可能想看看这个问题what-the-the-data-target-in-bootstrap-3
回答by feysal rujbally
You can use: <%@include file="findCompany.jsp"%>.
您可以使用：<%@include file="findCompany.jsp"%>。
