In one jsp page, On button click, load second jsp page as modal in bootstrap

Question

I have a requirement as, Creating a one form and load this form on multiple screen as modal using bootstrap.

Example : Suppose I am having 3 jsp pages i.e. Index.jsp, Request.JSP, Form.jsp

Now I have a link on Index.jsp which will display Form.jsp as Modal and I have button on Request.jsp, on click of button Form.jsp will get displayed as modal.

I have gone through multiple queries but solution was not satisfactory. I dont want to repeat the code and want to use Modal.

Thanks in advance.

Answer 1

i got the solution. I kept the Modal and Modal-dialog class div tags in main JSP like below :

<div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Cash Request Form</h4>
                </div>
                <div id="loadModalBody" >

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

Then I added the form with modal-body class in second JSP CashRequestForm.jsp :

<div class="modal-body panel">
            <div class="panel panel-body" id="panelActTypeAndDate">
                <div class="row">
                    <div class="col-md-8"><font>Activity Type</font></div>
                    <div class="col-md-3"><font>Select Activity Date</font></div>
                </div>
                <div id="row1" class="row">
.....
.....
Your code
 </div>
            </div>
        </div>

Then I called .load using jquery as below :

$(".popUp").click(function () {
                $("#loadModalBody").load("CashRequestForm.jsp");
            });

And it worked for me.