Модальное всплывающее окно не отображается при нажатии HREF - PullRequest
Новая
       13

Модальное всплывающее окно не отображается при нажатии HREF

0 голосов
/ 04 марта 2020

Я вызываю модальное всплывающее окно с HREF, и когда я нажимаю, целесообразно вызывать модальное, но оно только делает мой фон серым и ничего не показывает. У меня есть следующий код: 

<div class="modal fade" id="test" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                HELLO MY PEOPLE
            </div>
        </div>
    </div>
</div>

Нажмите HREF: 

<a href="#test" data-toggle="modal" class="more-link"></a>

Я что-то не так делаю? Это мой bootstrap CSS испортил? Когда я изменяю модалы на Контейнеры, это показывает, но это показывает плохо, и мне действительно нужны модалы, я делаю что-то не так?

Ответы [ 3 ]

0 голосов
/ 04 марта 2020

Код, который использовался сам, должен работать без проблем. Добавьте атрибут data-target в свой тег привязки и посмотрите, работает ли он.

Измените код тега привязки, как я уже упоминал ниже. Это должно работать нормально. 

<a href="#test" data-toggle="modal" data-target="#test" class="more-link"></a>
0 голосов
/ 05 марта 2020

Я проверил на своем локальном компьютере, и он работает нормально, но некоторые свойства CSS могут создать такую ​​проблему.

проверьте некоторые шаги

  • ваш z-index больше вашего тела или родительского тега
  • у вас есть свойство data-target в вашем теге привязки
  • должен включать jquery & bootstrap.js скрипт в вашем файле

РАБОЧИЙ ПРИМЕР 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">


<div class="modal fade" id="test" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Stackoverflow</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                HELLO MY PEOPLE
            </div>
        </div>
    </div>
</div>

<a href="#test" data-toggle="modal" data-target="#test" class="more-link">Open Modal</a>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
0 голосов
/ 04 марта 2020

Вы можете открыть модал с помощью data-target: 

<a href="#" data-toggle="modal" data-target="#test" class="more-link"></a>
...