Bootstrap - How to realize an modal popup with JSP
Solution 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-target
s are and how to use them - you might like to look at this question what-is-the-data-target-in-bootstrap-3
Solution 2
You can use: <%@include file="findCompany.jsp"%>
.
Dave
Updated on June 05, 2022Comments
-
Dave almost 2 years
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">×</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.
-
Dave about 9 yearsOk, I understand. So, I can't do anything? If I put id="findCompany" in principal div of findCompany.jsp, it doesn't work.
-
J Richard Snape about 9 yearsI'm not sure what you're trying to achieve different to what is happening now. Is there a reason you want to remove that element from index.jsp?
-
Dave about 9 yearsThe reason is that I don't like how I implemented it. It's ugly to see, I think. I just want to have a link in index.jsp which refers to modal-content in findCompany.jsp.
-
J Richard Snape about 9 yearsOK - you're just wondering about whether there is a "cleaner" way or something? I think I'm not the best person to answer in that case - I've only used bootstrap a little, I can debug, but I'm not an expert in all the ways you can use it, sorry.