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

2024-03-28

我正在尝试使用 Spring MVC 通过 JSP 实现模式弹出窗口。

In my 索引.jsp我有这个href链接:

<a href="findCompany" data-toggle="modal"data-target="#findCompany">Find company</a>

and, 总是在这个.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">&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>

没有任何作用。

为什么?我对模态类有一些错误。

我希望最后的代码没有。 只需在index.jsp 中链接并在findCompany.jsp 中链接模态形式即可。这是可能的? 如何?

抱歉英语不好。

Thanks.


请注意data-target="#findCompany"在你的链接中。#findCompany引用一个 HTML 元素id="findCompany".

如果您从页面中删除该元素(即通过删除)

<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以及如何使用它们 - 你可能想看看这个问题bootstrap-3 中的数据目标是什么 https://stackoverflow.com/questions/21944735/what-is-the-data-target-in-bootstrap-3

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Bootstrap - 如何用JSP实现模态弹出窗口 的相关文章

随机推荐