#laravel #bootstrap-4 #bootstrap-modal #laravel-blade
Вопрос:
Может ли кто-нибудь, пожалуйста, сказать мне, почему я не могу загрузить модальный загрузчик? Я пытаюсь запустить его в файле blade, он ничего не показывает. Он перенаправляет на URL href — адрес , но ничего не показывает:
lt;a href="#resetPassword" class="dropdown-item" data-toggle="modal"gt; lt;i class="fas fa-key mr-1"gt;lt;/igt; Modal Test lt;/agt; lt;!-- Bootstrap Modal --gt; lt;div class="modal fade" id="resetPassword" tabindex="-1" role="dialog" aria-hidden="true"gt; lt;div class="modal-dialog modal-dialog-centered modal-lg" role="document" style="width:px;"gt; lt;div class="modal-content"gt; lt;div class="modal-header text-center"gt; lt;h4 class="modal-title w-100 font-weight-bold"gt;{{ __('trans.changepassword') }}lt;/h4gt; lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"gt; lt;span aria-hidden="true"gt;amp;times;lt;/spangt; lt;/buttongt; lt;/divgt; lt;div class="modal-body mx-3"gt; lt;div class="md-form mb-3"gt; lt;form method="" action="" enctype="multipart/form-data"gt; lt;div class="form-group row"gt; lt;div class="col-md-4 col-form-label"gt; lt;label for="current_password"gt;{{ __('trans.currentpassword') }}lt;/labelgt; lt;/divgt; lt;div class="col-md-8"gt; lt;input id="current_password" type="password" class="form-control @error('current_password') is-invalid @enderror" name="current_password" required autocomplete="new-password"gt; lt;/divgt; lt;/divgt; lt;div class="modal-footer"gt; lt;button type="submit" class="btn btn-secondary" data-dismiss="modal"gt;{{ __('trans.cancel') }}lt;/buttongt; lt;button type="submit" class="btn btn-success"gt;{{ __('trans.changepassword') }}lt;/buttongt; lt;/divgt; lt;/formgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; Комментарии:
1. можете ли вы попробовать использовать
data-target="#resetPassword"вместоhrefэтого ?2. @matiaslauriti Это ничего не показывает
Ответ №1:
Проблема в ваших файлах css и js.
lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" /gt; lt;a href="#resetPassword" class="dropdown-item" data-toggle="modal"gt; lt;i class="fas fa-key mr-1"gt;lt;/igt; Modal Test lt;/agt; lt;!-- Bootstrap Modal --gt; lt;div class="modal fade" id="resetPassword" tabindex="-1" role="dialog" aria-hidden="true"gt; lt;div class="modal-dialog modal-dialog-centered modal-lg" role="document" style="width:px;"gt; lt;div class="modal-content"gt; lt;div class="modal-header text-center"gt; lt;h4 class="modal-title w-100 font-weight-bold"gt;{{ __('trans.changepassword') }}lt;/h4gt; lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"gt; lt;span aria-hidden="true"gt;amp;times;lt;/spangt; lt;/buttongt; lt;/divgt; lt;div class="modal-body mx-3"gt; lt;div class="md-form mb-3"gt; lt;form method="" action="" enctype="multipart/form-data"gt; lt;div class="form-group row"gt; lt;div class="col-md-4 col-form-label"gt; lt;label for="current_password"gt;{{ __('trans.currentpassword') }}lt;/labelgt; lt;/divgt; lt;div class="col-md-8"gt; lt;input id="current_password" type="password" class="form-control @error('current_password') is-invalid @enderror" name="current_password" required autocomplete="new-password"gt; lt;/divgt; lt;/divgt; lt;div class="modal-footer"gt; lt;button type="submit" class="btn btn-secondary" data-dismiss="modal"gt;{{ __('trans.cancel') }}lt;/buttongt; lt;button type="submit" class="btn btn-success"gt;{{ __('trans.changepassword') }}lt;/buttongt; lt;/divgt; lt;/formgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"gt;lt;/scriptgt; lt;script src="https://unpkg.com/popper.js"gt;lt;/scriptgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"gt;lt;/scriptgt;