0

Twitter ブートストラップ、smarty、jquery、php を使用して Web サイトを開発しています。私は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 として定義しました。

私の問題は何ですか？

「HI....」の代わりに、以前のコンテンツ (合計ページ、つまり、申請者の名前、電子メール、モバイル、ヘッダー、フッター) を含むMODALを表示するリンクをさらに表示します。

では、ページ コンテンツ全体の代わりにHi...を表示する方法について説明します。

前もって感謝します。

出力の問題イメージをより適切に参照できるように提供されています。

もっと見るリンクをクリックする前に：

ここに画像の説明を入力

リンクがクリックされた後のモーダル コンテンツ:

ここに画像の説明を入力

4

2 に答える 2

0

モーダルにリモートページのコンテンツを取得させようとしているようです。

Bootstrap のモーダルでリモート ページを使用する例については、次のページを確認してください。

基本的に、リモート 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 に答える
0 
$('#myModal').on('hidden', function () {
  $(this).removeData('modal');
});
于 2014-04-16T05:31:49.380 に答える