0

我正在使用 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 。

我想做的事？

要查看总申请人数据，我已经给出了查看更多链接，该链接将显示在 MODAL 中。

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

我的问题是什么？

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

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

提前致谢。

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

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

在此处输入图像描述

点击链接后的模态内容：

在此处输入图像描述

4

2 回答 2

0 
$('#myModal').on('hidden', function () {
  $(this).removeData('modal');
});
于 2014-04-16T05:31:49.380 回答
0

好像您正试图让模态抓取远程页面的内容。

查看以下页面以获取在 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。

于 2013-03-09T12:39:55.217 回答