javascript - Bootstrap Modal 不显示对话框
问题描述
很长一段时间以来,我一直在尝试实现 Bootstrap Modal。我已按照引导文档中的说明进行操作,但仍然无法正确操作。为什么这不起作用jsfiddle
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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">
...
</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://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
解决方案
要运行引导程序,您需要使用 jquery。更新了下面的代码和 jsfiddle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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">
...
</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://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
推荐阅读
- rest - 有没有一种方法可以使用 insomnia rest 客户端在 base64 中编码查询参数?
- python - Pandas 或 Dask 数据框,根据缺少的分组变量组合填充值
- apache-kafka - Kafka Connect 集群只有一个节点响应 REST API 请求
- node.js - mongodb node js中的外键和主键关系
- apache2 - 将 prefork 更改为 worker 的问题
- python - 如何让这个 for 循环跳过没有与会者和基于 domain.com 的外部与会者的会议?
- c++11 - C 和 C++ 之间的单个程序在行为上有什么不同?
- c# - C# PictureBox.Image 参数无效
- angular - 从角度版本 7 更新到版本 8 后无法 ng 服务,在 95% 不是目录后给出错误
- javascript - Discord bot 不更新时间,仅在开始运行时继续打印时间(Node/Javascript)