html - 从下拉列表中触发时,Bootstrap-4 模态不显示
问题描述
我使用了一个下拉菜单,其中一个下拉项目应该打开一个模式。但它没有显示。当我使用普通按钮而不是下拉按钮访问模式时,它可以正常工作。我认为它在下拉窗口中打开。
下拉式菜单
单击启动演示模式后
解决方案
很难在没有看到任何代码的情况下确定您遇到问题的确切位置...但是从您的描述来看,您似乎已将 Modalid=myModal
放置在下拉列表中...何时应该在下拉列表之外;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown class is used to indicate a dropdown menu.</p>
<p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
<p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#myModal">Open Modal</a>
</div>
</div>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
推荐阅读
- java - 替换 ASM 中的 Class.forName 方法调用(内联)
- mysql - 如何连接三个mysql表
- html - 如何使用 Ruby 解析 HTML 文件标题
- apache - 如何将 url 重定向到其他域?
- qt - 对于大多数行,SonarQube 表示“测试未涵盖”
- android - React Native Navigation - [FAB] 浮动操作按钮未按预期显示
- python - 带有反应 Discord.Py 的背景循环
- python - 关于while循环的一般学习问题
- android - 文件夹为空时无法解析符号原始
- go - 使用golang从邮递员那里获取多个ID的方法是什么