Как отобразить модальное окно bootstrap с помощью тега привязки

Question

Я пытаюсь вызвать modal с помощью тега привязки ... Вот код HTML

<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
   <span class="dropdown-header">
      <i class="far fa-user-circle"></i>
      <a class="nav-link" name='viewProfile' href="studenthome.php?viewProfile=true" data-widget="control-sidebar"
      data-slide="true" role="button"><?php echo $_SESSION['name']; ?></a>
   </span>
   <span class="dropdown-header bg-danger font-weight-bold">                        
     <a class="nav-link" name='deleteAccount' style="color: #fff" href="studenthome.php?deleteAccount=true" data-widget="control-sidebar" data-slide="true" role="button" data-toggle="modal" id="pop-over" data-target="#exampleModal">Delete Account</a>
  </span>
</div>

Код выше находится внутри панели навигации , и когда я нажимаю Удалить учетную запись Я хочу отобразить мой модальный код, и вот мой модальный код

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <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>

Кто-нибудь может помочь мне вызвать модальный класс, когда я нажимаю Удалить учетную запись ссылка. Заранее спасибо

Answer 1

Проверьте это

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

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#"><i class="far fa-user"></i> Action</a>
    <a class="dropdown-item" href="#"><i class="far fa-user"></i> Another action</a>
    <a class="dropdown-item text-danger" data-toggle="modal" data-target="#exampleModal"><i class="fas fa-user-times"></i> Delete Account</a>
  </div>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <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>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/js/all.min.js"></script>

Answer 2

С введенным вами HTML раскрывающийся список вообще не отображался для меня. Мне пришлось добавить переключатель, чтобы он работал:

<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
</button>

С тех пор у меня не было проблем с открытием модального окна, проверьте это fiddle . Я не знаком с PHP и тем, как он будет работать с атрибутом href, который вы добавили для кнопки удаления. Это из раскрывающихся документов bootstrap .