我正在尝试使用 Spring MVC 通过 JSP 实现模式弹出窗口。
在我的index.jsp中，我有这个href链接:
<a href="findCompany" data-toggle="modal"data-target="#findCompany">Find company</a>
并且，始终在此 .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>
当我点击查找公司 href 链接时，我的 @Controller 将我重定向到 findCompany.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 显示为模式弹出窗口，这就是我想要的。
好的，一切正常。
但是，如果我从 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>
没有任何作用。
为什么？我对模态类有一些错误。我希望最后的代码没有。 只需在index.jsp 中链接并在findCompany.jsp 中链接模态形式即可。这是可能的？ 怎么做？
抱歉英语不好。
谢谢。
最佳答案
请注意链接中的data-target="#findCompany"。 #findCompany 引用带有 id="findCompany" 的 HTML 元素。
如果您从页面中删除该元素(即通过删除)
<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相对应的元素，并且它似乎不起作用。
有关什么是data-target以及如何使用它们的信息 - 您可能想看看这个问题 what-is-the-data-target-in-bootstrap-3
关于twitter-bootstrap - Bootstrap - 如何用JSP实现模态弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28480109/