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

【问题标题】：How to call a bootstrap modal store in one JSP page from another JSP Page?如何从另一个 JSP 页面调用一个 JSP 页面中的引导模式存储？
【发布时间】：2016-10-26 07:31:25
【问题描述】：

我有一个 JSP 页面，其中包含整个模态说模态结构（页眉、正文和页脚）。页面如下所示

<% @ page language = "java" contentType = "text/html; charset=ISO-8859-1"
pageEncoding = "ISO-8859-1"
%>
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <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/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <p>Some text in the modal.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>

            </div>
        </div>

    </body>
</html>

我还有另一个 JSP 页面，点击 Open Modal 按钮，上面 JSP 页面中 ID 为 myModal 的 modal 商店将打开。当前页面将完好无损，另外还会在其上打开一个模式弹出窗口。这是我将调用模态的页面

<% @ page language = "java" contentType = "text/html; charset=ISO-8859-1"
pageEncoding = "ISO-8859-1"
%>
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <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/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <h2>Modal Example</h2>
            <!-- Trigger the modal with a button -->
            <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
        </div>
    </body>
</html>

我怎么得到这个？

【问题讨论】：

标签： javascript jquery html twitter-bootstrap jsp

【解决方案1】：

如果模态的 HTML 没有呈现在页面上，那么没有 ajax 就无法实现。您需要创建一个 ajax 函数，该函数将仅获取模态的 HTML 代码并将其放在当前正文中的某个位置（可能使用 jquery 的追加），然后您可以显示它。

【讨论】：

【解决方案2】：

首先，您的 moal 代码需要只是一个 div 之类的东西，您不想尝试在代码中包含整个其他 html 文档。

您想要包含该文件，无论是通过导入还是包含到您想要使用模式的页面范围内，然后在 js 中执行 $("#myModal").modal('show')

【讨论】：