Materialise Modal не работает, остается открытым

Question

Я пытаюсь использовать модальное окно материализации в своем приложении laravel, у меня есть файл лезвия, называемый скелетом, в который я помещаю все свои «скрипты» и таблицы стилей c. Это приводит к разделам, которые я определяю в своих файлах с одним лезвием. Это отлично работает, однако в последнее время у меня было множество проблем с материализацией.

Когда я пытаюсь использовать модальное окно, я использую этот код из документации:

  $(document).ready(function() {
            $('.modal').modal();
        });

Это в внизу моего файла-скелета и отображается внизу каждого файла. Я пробовал поместить его в свой файл, но это не сработало.

Мой HTML выглядит так:

 @if($auth >= 5) <a href="#modal1" class="btn waves-effect waves-light green right modal-trigger"
                href="#modal1"> Create</a>
            @endif

внизу файла лезвия:

<div id="modal1" class="modal">
<div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
</div>
<div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
</div>

Мой модальный экран отображается на экране, но он автоматически «отображается», и когда я нажимаю кнопку открытия, он ничего не делает. Я просто использую демо-модальный режим, я настрою его, когда смогу заставить его работать, спасибо.

Answer 1

Хорошо, во-первых, почему два href на модальном триггере?

 @if($auth >= 5) <a href="#modal1" class="btn waves-effect waves-light green right modal-trigger"
                href="#modal1"> Create</a>
            @endif

Снимите один, и давайте возьмем его оттуда.

В приведенном выше ответе неверно указано, что init ниже открывает модальное окно:

$(document).ready(function() {
  $('.modal').modal();
});

Это просто инициализация, он подключается к JS, чтобы он работал.

<!-- this is the initialisation -->
$('.modal').modal();
<!-- this is instruction to open -->
$('.modal').modal('open');

Проверьте перо здесь для двух команд, прокомментируйте каждую, чтобы увидеть, что произойдет.

Модальные окна закрыты по умолчанию и запускаются нажатием .modal-trigger или использованием команды открытия выше ..

Answer 2

Я был глуп, у меня по какой-то причине были ссылки bootstrap js, и они противоречили друг другу. Извини, что потратил время зря.

Answer 3

Здесь вы go с решением

Для открытия модального окна используйте приведенный ниже код

$('.modal').modal('show');

Для закрытия модального окна используйте приведенный ниже код

$('.modal').modal('hide');

Он открывается автоматически из-за

$(document).ready(function() {
  $('.modal').modal();
});

Когда документ готов, он открывает модальное окно.

По щелчку

@if($auth >= 5) <a href="#modal1" class="btn waves-effect waves-light green right modal-trigger" href="#modal1"> Create</a>
@endif

Откройте модальное окно, используя $('.modal').modal('show');