Bootstrap4スマートフォンでtable内のmodalが表示されない問題を解決したい。

Question

以下の記事を読み、テーブル内にモーダルを設置しました。
bootstrap4 modal

PC表示では問題なく動作するのですが、スマートフォンで確認すると、画面全体が暗くなって動作しなくなります。
公式ページのモーダルはスマートフォンサイトでも問題なく動作するので、おそらくテーブル内にモーダルを設置した事が原因なのかなと思っています。

どなたか改善方法を教えていただけないでしょうか？
よろしくお願い致します。

<table id="table" width="100%" class="table able-sm">
    <thead class="thead-dark">
      <tr>
        <th class="text-center">日付</th>
        <th class="text-center">モーダル</th>
    </thead>
    <tbody>
        <tr class="odd gradeX text-center">
          <td class="text-center" width="70">2020年11月12日</td>

          <td class="text-center" width="70">
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
                Launch demo modal
            </button>
          </td>
            
            <!-- Modal -->
            <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    </div>
                    <div class="modal-body">
                    ...
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
                </div>
            </div>
        </tr>
    </tbody>
  </table>

Comments

[cerfweb]

テーブル外にモーダルを配置するのは試されましたか。いずれにせよテーブル内のこの位置にdivを配置するのは間違っています。

[退会済みユーザー]

アドバイスありがとうございます。
テーブル外のモーダル設置は上手く行きましたが、目的としてはテーブル内にモーダルを設置したいです。
divの位置が違っているのですね。

[cerfweb]

テーブル内にモーダルを設置する理由はどういったことですか。

[退会済みユーザー]

サーバサイトからデータを私、それをテーブルでループさせ、詳細はモーダルを参照、と言った具合の実装をしたいのです。
いかがでございましょうか？

Answer 1

table内にモーダルを設置したいとのことですが、table直下にdivを置くことはできません。
以下のページの4.9.1. The table elementのContent modelに書いてあるのがtable直下に配置することができるタグの種類です。
https://www.w3.org/TR/html52/tabular-data.html#elementdef-table

解決法としては数が少ないのであればtable外でモーダルの記述用に2回目のループ処理を行うか、そうでない場合はモーダルに表示する内容はクリックされたボタンによって該当するデータをその都度ajaxで読み込むなどするのがスマートなやり方かと思います。

Comments

[退会済みユーザー]

ご丁寧にありがとうございました。
テーブル内クリックでモーダルのようなのを実装できる方法を他に探してみます！