0

目標を達成するためにここにある多くの解決策を試しましたが、残念ながら、これらのどれも私が望むものにはうまくいかないようです.

ループによってMySQLデータベースからロードされた（たとえば）ユーザーのリストがあります。ここで、追加情報を含むモーダルを開くすべてのユーザーの名前のボタンが必要です。

リストは次のようなものです。

<li><a class='btn btn-default' data-toggle='modal' data-target='myModal' href='user.php?userid=1'>User 1</a></li>
<li><a class='btn btn-default' data-toggle='modal' data-target='myModal' href='user.php?userid=2'>User 2</a></li>

モーダル内では、別の MySQL クエリを実行して、渡された変数 (つまり、userid=1) に応じて DB からより多くのデータを取得する必要があります。

#myModal のコードはどこに配置すればよいですか? user.php に完全に (または部分的に) 配置すると、モーダルの背景が表示されますが、モーダルは表示されません。リンクを含むファイルのどこかに配置すると、リモートファイルが読み込まれません。また、モーダル タイトルを動的に変更することはできません (つまり、「ユーザー 1」と読む必要があります)。

そして、リンクを再度クリックすると、他のユーザーデータをリロードするという問題があります。

これを行う方法についてのヒントを誰かに教えてもらえますか?

4

1 に答える 1

2

リストが次のように配置されている同じページに、id myModal のモーダル div を配置します。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>

次に、モーダル ダイアログの残りの部分をリモートの user.php に挿入します。このような：

<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">Data review</h4>

    </div>
    <div class="modal-body">
    <! -- CONTENT HERE -->

    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

    </div>
</div>
<!-- /.modal-content -->

最後に、複数のモーダルを機能させるには、次のスクリプトを追加します。

 <script>
$("div[id$='Modal']").on('hidden.bs.modal',
    function () {

        $(this).removeData('bs.modal');
    }
);
</script>

それはそれを行う必要があります。タイトルを変更することは今では簡単です。

于 2013-11-08T09:12:51.227 に答える