Почему не отображается модальное окно?

Question

Владимир @sovlarus

Почему не отображается модальное окно?

Пытаюсь сделать простенький сайт на bootstrap 4. Одна из задач - изменение данных в БД пользователем. Для изменения очень хочу использовать модальные окна (не спрашивайте почему - это не моя прихоть).
Есть, соответственно, простой код в index.php:

<!DOCTYPE html>
<html lang="ru">
<head>
    <?php require_once ( 'modules/head.php' );?> //Здесь подключены js и css bootstrap
    <title></title>
</head>
<body>
    <div class="container-fluid">
        <div class="d-flex flex-row">
            <div class="d-flex flex-column-3">
                <div class="leftside">
                // Блок, в котором выводится информация о странице и меню
                    <div id="navblock">// Вывод меню</div>
                </div>
            </div>
            <div class="d-flex flex-column-9">
                <div class="content">// Вывод контента в подключаемом файле</div>
            </div>
        </div>
    </div>
</body>
</html>

Интересующая нас часть контента в подключаемом файле схематично выглядит так:

<div class="row">
        <div class="col-3">
                <span>Название поля</span>
        </div>
        <div class="col-5">
                <img /> Неважно какая картинка
        </div>
        <div class="col-4">
                <button type="button" class="tmpl_subscribe_bitton" data-toggle="modal" data-target="#exampleModal">Изменить картинку</button>
                <?php include ( 'modal.php' ); ?> //Подключаемый файл модального окна
        </div>
</div>

И сам файл модального окна (источник - документация Bootstrap4):

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
                <div class="modal-content">
                        <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">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>

Проблема в том, что при нажатии на кнопку окно не появляется.
Варианты, которые я уже пробовал:
1. Вместо include размещал сам код окна. Хотя это мертвому - припарки: код и так успешно размещается на странице.
2. Размещал код окна в конце подключаемого файла.
3. Размещал код окна в index.php перед закрывающим тегом

Вопрос задан более трёх лет назад
2136 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

4 комментария

Владимир @sovlarus Автор вопроса

В консоли все чисто. А этот код, вынесенный в отдельный файл замечательно работает. ExampleModal, в данном случае, взаимодействует с атрибутом aria-labelledby первого div блока модального окна и id заголовка. myModal обрабатывается java-скриптом Bootstrap.

Написано более трёх лет назад
Andreaszak @Andreaszak

Модальное окно выводится по id или классу, которое соответствует атрибуту data-target

Смотрите документацию

Атрибут aria-labelledby содержит идентификатор для объекта h5, с соответствующим id, в данном случае

Написано более трёх лет назад
Владимир @sovlarus Автор вопроса

Andreaszak, благодарю! Вы правы. Но тогда непонятно, почему в документации Bootstrap и в их кодах примеров по другому...

Написано более трёх лет назад

Andreaszak @Andreaszak

Вот пример из документации

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">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>

Может из какого-то другого источника брали

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос