模态正文内容被替换：Twitter Bootstrap答案

【问题标题】：Modal Body content gets replaced : Twitter Bootstrap模态正文内容被替换：Twitter Bootstrap
【发布时间】：2014-04-16 13:31:49
【问题描述】：

我正在使用 twitter bootstrap、smarty、jquery 和 php 开发一个网站。而且我对 Bootstrap 很陌生。

所以我准备了一个收集申请人数据的页面。

html 内容：

{include file="admin/admin.header.tpl"}
<div class="summary">
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th>Applicant Name</th>
                <th>Email</th>
                <th>Mobile No.</th>
                <th>Details<th>
            </tr>
        </thead>
        <tbody>
            {foreach from=$totalApplicantSummary key=key item=value}
                <tr>
                    <td>{$value.applicant_name}</td>
                    <td>{$value.email}</td>
                    <td>{$value.mobile}</td>
                    <td><a data-toggle="modal" href="?e={$value.email}&fid={$formId}" data-target="#myModal" data-keyboard="false">view more</a></td>
                </tr>
            {/foreach}
        </tbody>
    </table>
    <div id="myModal" class="modal hide fade in" aria-hidden="true" style="display: none;">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Modal header</h3>
        </div>
        <div class="modal-body" >
            <h1>Hi</h1>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
        </div>
        <!-- Modal -->
    </div>
</div>
{include file="admin/admin.footer.tpl"}

注意：admin.footer.tpl 包含 bootstrap.min.js 和 jquery.min.js 。

我想做什么？

要查看申请人的总数据，我提供了查看更多链接，该链接将显示在模态。

我已将模态定义为“#myModal”，并将 “HI....” 定义为 MODAL BODY CONTENT。

我的问题是什么？

查看更多链接显示 MODAL，其中包含以前的内容（总页面，即申请人姓名、电子邮件、手机以及页眉、页脚）而不是“HI... 。”。

那么如何显示 Hi... 而不是整个页面内容。

提前致谢。

为了更好地参考输出的问题图像。

在查看更多链接之前点击：

点击链接后的模态内容：

【问题讨论】：

能否请您参考我们的测试页面...这样我们会更容易为您提供帮助。谢谢
@Shail : 我需要附加渲染页面的图像吗？
能做个测试页就好了
@Shail 我已附上图片

标签： html twitter-bootstrap modal-dialog

【解决方案1】：

似乎您正试图让模式抓取远程页面的内容。

查看以下page，了解在 Bootstrap 中使用带有 Modals 的远程页面的示例。

基本上，如果提供了远程 url，内容将通过 jQuery 的 load 方法加载并注入到 .modal-body 中。如果您使用的是数据 api，您也可以使用 href 标签来指定远程源。这方面的一个例子如下所示：

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

如果您不尝试从远程页面提取数据，那么您的问题是您的 href 标记需要包含模式的 ID，即：#myModal。

【讨论】：

【解决方案2】：

$('#myModal').on('hidden', function () {
  $(this).removeData('modal');
});

【讨论】：