时间戳

首页 > 解决方案 > 如何使用锚标签显示引导模式

html - 如何使用锚标签显示引导模式

问题描述

我正在尝试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>

当我单击删除帐户链接时，任何人都可以帮助我调用模态类。先感谢您

标签： htmlbootstrap-4

解决方案

使用您提供的 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 的下拉文档。

推荐阅读