Bootstrap 4 Modal Not Showing - черный экран не модальный? - PullRequest
Новая
       21

Bootstrap 4 Modal Not Showing - черный экран не модальный?

0 голосов
/ 07 февраля 2019

https://jsfiddle.net/0z9mbp4r/

    <tr>
  <td>11</td>
  <td><a data-toggle="modal" data-target="modal10">Miscellaneous Title</a></td>
  <td><p>C+</p></td>
  <td><i class="fa fa-star"></i></td>
  <td><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></td>
  <td><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></td>
  <td><p>A+</p></td>
  <td><p>No</p></td>
  <td><p>B</p></td>
  <td><p>B+</p></td>
</tr>

    <div class="modal fade" id="modal10" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-lg modal-dialog" role="document">
    <div class="modal-content p-2">
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button></br></br>
        <div class="row">
          <div class="col-sm-12 col-md-6 my-auto">
            <img class="card" src="(imageinfo)" title="(info)" alt="(info)">
          </div>
          <div class="col-sm-12 col-md-6">
            <h3>Name</h3>
            <p>Miscellaneous Info</p>
          </div>
          <div class="col-sm-12 col-md-12">
            <p>Miscellaneous Info</p>
            <br>
            <a href="#">View Miscellaneous Link</a><br>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Извините, импорт кода не сработал.

По какой-то причине я не могу понять, почему этот модал не отображается правильно?Разметка одинакова для каждой из моих строк модальных таблиц, поэтому она должна вызываться правильно.Когда я щелкаю строку таблицы, в которой выделен модал, просто исчезает черный / серый, а затем не появляется модал?В консоли ничего не появляется из-за ошибок.

Любая помощь приветствуется.Спасибо!

1 Ответ

0 голосов
/ 08 февраля 2019

Решение простое - вы сделали опечатку.

Вам не хватает # в data-target="modal.

Замените это:

<a data-toggle="modal" data-target="modal10">Miscellaneous Title</a>

Кому:

<button data-toggle="modal" data-target="#modal10">Miscellaneous Title</button>

Обратите внимание, что может быть лучше использовать <button>, чтобы открыть модалы.

...