如何从另一个 JSP 页面调用一个 JSP 页面调用中的引导模式？答案

【问题标题】：How to call bootstrap modal which was in one JSP page call from another JSP Page?如何从另一个 JSP 页面调用一个 JSP 页面调用中的引导模式？
【发布时间】：2017-07-22 20:45:46
【问题描述】：

我有一个包含 Bootstrap 模式的 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 "%>
<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有一个按钮调用modal，下面是主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中的模态。

【问题讨论】：

标签： javascript html twitter-bootstrap jsp twitter-bootstrap-3

【解决方案1】：

您的页面是否包含引导模式仅用于模式？如果你的答案是肯定的然后尝试将此 jquery 添加到该页面

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

【讨论】：

这行代码需要在哪个页面使用？主页或其他只有模式的页面？
只包含模态的文件
我在 getCouponDetails() 函数中添加了上面的代码，但是它不起作用:(
如果我在模态中添加上述代码，我如何从另一个jsp页面调用模态？点击主页面按钮调用getCouponDetails()函数从java中获取详细信息并将数据添加到modal popup中