Как исправить загрузочный модал в Angular 7? - PullRequest
Новая
       16

Как исправить загрузочный модал в Angular 7?

0 голосов
/ 05 мая 2019

Когда я нажимаю кнопку Добавить Blogger, вместо открытия модального, страница просто перенаправляется на домашнюю страницу.Как я могу решить проблему? 


<a href="#" class="btn btn-outline-light btn-sm" data-toggle="modal" data-target="#addblogger">Add Blogger</a>


<div class="modal fade" id="addblogger">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header bg-success text-white">
        <h5 class="modal-title">Add New Blogger</h5>
        <button class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">

        <div class="modal-footer">

        </div>
      </div>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 05 мая 2019

Вам нужно иметь идентификатор модального элемента в качестве href элемента a, иначе "#" вызовет перенаправление. 

<a href="#addblogger" class="btn btn-outline-light btn-sm" data-toggle="modal">
  Add Blogger
</a>

Вы можете сделать это так, как вы это делаете (используя атрибут data-target), но вам понадобится javascript: void (0) на href - чтобы избежать перенаправления. Я бы не стал этого делать, хотя 

<a href="javascript:void(0)" class="btn btn-outline-light btn-sm" data-toggle="modal" data-target="addblogger">
  Add Blogger
</a>

Если бы я собирался использовать цель данных и использовать классы btn - я бы использовал элемент кнопки. 

<button type="button" class="btn btn-outline-light btn-sm" data-toggle="modal" data-target="addblogger">
  Add Blogger
</button>
...