Home>

I read the following article and set up a modal in the table.
bootstrap4 modal

It works fine on the PC display, but when I check it on my smartphone, the entire screen goes dark and it stops working.
The modal on the official page works fine on the smartphone site, so I think it's probably because the modal was installed in the table.

Could anyone please tell me how to improve it?
I look forward to working with you.

<table width = "100%">
  <thead>
    <tr>
      <th>date</th>
      <th>Modal</th>
  </header>
  <tbody>
      <tr>
        <td width = "70">November 12, 2020</td>
        <td width = "70">
          <!-Button trigger modal->
          <button type = "button" data-toggle = "modal" data-target = "# exampleModalLong">
                Launch demo modal
          </button>
        </td>
          <!-Modal->
            
                
                
                    
                     Modal title 
                  <button type = "button" data-dismiss = "modal" aria-label = "Close">
                      <span aria-hidden = "true">&times;</span>
                  </button>
                    
                    
                    ...
                    
                    
                  <button type = "button" data-dismiss = "modal">Close</button>
                  <button type = "button">Save changes</button>
                    
                
                
            
      </tr>
  </tbody>
</table>
  • Answer # 1

    I want to set a modal in the table, but I can't put a div directly under the table.
    The types of tags that can be placed directly under the table are described in the Content model of 4.9.1. The table element on the following page.
    https://www.w3.org/TR/html52/tabular-data.html#elementdef-table

    As a solution, if the number is small, perform a second loop processing for modal description outside the table, or if not, the content to be displayed modally is ajax each time by clicking the button. I think it's a smart way to read it.