Question

我正在尝试使用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>

当我点击 find company 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">&times;</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>

无效。

为什么呢？我对模态类有些不对劲。

我希望这最后一段代码没有。只需在findCompany.jsp中链接index.jsp和modal形式。可能吗？怎么样？

抱歉英文不好。

感谢。

Answer 1

请注意链接中的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

Answer 2

您可以使用：<%@include file="findCompany.jsp"%>。

Bootstrap - 如何使用JSP实现模态弹出窗口

2 个答案: