Question

我有一个JSP页面，其中包含Bootstrap模式，页面如下所示。

<%@page import="cpd.webAdmin.Coupons"%>
<%@ page contentType="text/html; charset=iso-8859-1" language="java"%>
<%@ page import="java.util.*,cpd.site.*, cpd.webAdmin.Coupons "%>
<html>
<head>

    <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" href="/test.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style type="text/css">

.modal-body {
    max-height: 420px;
    overflow-y: auto;
}

</style>
</head>
<script type="text/javascript">


</script>


       <!-- Modal -->
    <body>
        <div class="modal hide fade" id="myModal" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">  
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Coupon Details</h4>
            </div>
            <div class="modal-body" id="couponListBody">
                <table class="table table-striped" id="CpnTable">
                    <thead>
                        <tr>
                            <th data-field="state" align="center" data-checkbox="true" data-align="center" text-nowrap>Select</th>
                            <th data-field="coupon_id" align="center" data-align="center" data-sortable="true" text-nowrap>Coupon Id</th>
                            <th data-field="coupon_desc" align="center" data-align="center" data-sortable="true" text-nowrap>Coupon Description</th>
                            <th data-field="coupon_number" align="center" data-align="center" data-sortable="true" text-nowrap>Coupon Number</th>  
                        </tr>
                    </thead>

                    <tbody>
                            <%                          
                                ArrayList<Coupons> cpns=(ArrayList)request.getAttribute("coupons");
                                Iterator it=cpns.iterator();
                                while(it.hasNext())
                                {
                                    Coupons c=(Coupons)it.next();
                            %>

                        <tr>
                            <td class="vcenter" width="10%" align="center"><input type="checkbox" id="blahA" value="1"/></td>
                            <td width="20%" align="center"><%=c.couponId%></td>
                            <td  width="40%" align="center"><%=c.couponDesc%></td>
                            <td width="20%" align="center"><%=c.couponNumber%></td>

                        </tr>
                         <%
                         }
                         %>

                    </tbody>

                </table> 
            </div>
             <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="close">Close</button>
             </div>
        </div>
        </div>
        </div>
    </body> 
</html>

父jsp有一个按钮来调用模态，主jsp在下面。

<%@page import="cpd.webAdmin.Coupons"%>
<%@ page contentType="text/html; charset=iso-8859-1" language="java"%>
<%@ page import="java.util.*,cpd.site.* , cpd.webAdmin.Coupons " %>
<jsp:useBean id="adminObj" class="cpd.webAdmin.Admin" scope = "request"></jsp:useBean>
<html>
<head>
<link rel="stylesheet" href="/test.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Welcome to  WebAdminPage</title>
</head>
<%
  SiteInfoVO si = Site.getSiteInfo();
    String ctx = si.webContext;
%>
<script>

    function getCouponDetails(){

       $('#myModal').modal('show');
        imageDetailsForm.method = "GET";
        var url = "/<%=si.webContext%>/servlet/cpd.webAdmin.WebAdminServlet";
        imageDetailsForm.action = url;
        document.getElementById("imageDetailsForm").submit(); 
    } 

</script>
  <body bgcolor="DDE3E3" class="container">
  <div class="well" > <h1 align="center">OnDemand Web Admin Page</h1> </div>


        <br>
        <FORM NAME="imageDetailsForm" >
            <div class="well">          
            <br>
            <div id="searchDtlSection" name="searchDtlSection" class="form-group">  
                <div class="col-md-7">
                    <div class="form-group row">
                        <label for="image_id" class="col-md-2 control-label pull-left text-nowrap">Image Id:</label> 
                        <div class="col-md-5 ">
                            <input type="text" class="form-control" id="image_id" name="imageID" placeholder="Image Id""> 
                        </div>
                        <div class="col-md-2 " >
                                <input type="text" class="form-control" id="couponidVal" name="couponidVal" placeholder="Coupon Id" value='<jsp:getProperty property="coupon_id" name="adminObj"/>'>
                            </div>  
                            <div class="col-md-1 ">                             
                                <button type="submit" class="btn btn-primary form-control" data-toggle="modal" data-target="#myModal" id = "searchCpnBtn" name="searchCpnBtn" onclick="getCouponDetails()">...</button> 
                            </div>
                    </div>
                </div>
            </div>       
        </div>  
    </FORM>
  </body>
</html>

当我在主jsp页面中调用getCouponDetails（）函数时，如何打开另一个jsp中的模态。

Answer 1

是包含bootstrap模式的页面仅用于模态??? 如果你的答案是肯定的然后尝试将此jquery添加到该页面

$(document).ready(function(){
$('#myModal').modal('show');
});

如何从另一个JSP页面调用一个JSP页面调用中的bootstrap模式？

1 个答案: