html - Bootstrap Modal 似乎不适用于 Anchor Tag
问题描述
我在我的 html 中使用模式来处理一些东西。我尝试将它与锚标签一起使用,但没有成功。我究竟做错了什么?这是我的代码:
<div class="logo">MAIN</div>
<ul>
<li>
<a href="#" class="navy-item">3</a>
<div class="navy-content">
<div class="navy-sub">
<ul>
<li>
<a data-toggle="modal" href="#myModal">3-1</a>
</li>
<li>
<a href="#">3-2</a>
</li>
</ul>
<span class="close-my">×</span>
<span class="close-my">═</span>
<span class="close-my">−</span>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
我正在将 Darkly Theme 用于 Bootstrap 的东西。其他事情正在工作,但不是这个。你可以在这里找到主题:https ://bootswatch.com/darkly/
解决方案
您需要将 , 添加id
到myModal
您尝试定位的模式中:
<a data-toggle="modal" href="#myModal">ANCHOR</a>
<!-- Modal -->
<div id="myModal" class="modal"> <!-- add id here -->
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
更新
bootstrap
我最好的猜测是其中一个或jQuery
包含可能存在问题。您的代码应该按原样运行,请参见下面的示例:
<link href="https://bootswatch.com/4/darkly/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="logo">MAIN</div>
<ul>
<li>
<a href="#" class="navy-item">3</a>
<div class="navy-content">
<div class="navy-sub">
<ul>
<li>
<a data-toggle="modal" href="#myModal">3-1</a>
</li>
<li>
<a href="#">3-2</a>
</li>
</ul>
<span class="close-my">×</span>
<span class="close-my">═</span>
<span class="close-my">−</span>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
推荐阅读
- sql - 按转置的 SQL 组
- node.js - 使用公共 wifi 发出 npm install
- javascript - 导入和破坏 es6 语法之间的关系?
- mysql - 使用 mysqldump 从 mariadb 数据库导出屏蔽数据
- reactjs - 使用 useCallback 和 useMemo 在 React 中重新渲染的问题
- javascript - 根据时间戳获取今天和昨天的项目
- ms-access - 取消form.unload事件时如何返回到指定控件?
- python - 维护 PyPDF2 的替代品
- java - 添加用户字段后的 StackOverflowError
- javascript - 如何使用 imagepack 在 React Native 中上传文件