Bootstrap - How to realize an modal popup with JSP

I'm trying to realize an modal popup with JSP, using Spring MVC.

In my index.jsp I have this href link:

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

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>

When I click on find company href link, my @Controller redirects me in findCompany.jsp, where there is the form for find a company.

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">&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 is shown like an modal popup, and that's is what I want.

Ok, everything works.

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>

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?

Sorry for bad english.

Thanks.

回答1:

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>

The link will no longer have an element corresponding to its data-target and it won't seem to work.

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

回答2:

You can use: <%@include file="findCompany.jsp"%>.