javascript - Bootstrap 打开简单模态
问题描述
在基于引导程序的网页中,我希望在当前页面顶部显示一个对话框/弹出窗口。
我有以下代码:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<img href="#myModal" data-toggle="modal" src="https://minotar.net/helm/EpicMinerBackup">
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
问题出在以下部分,它破坏了网页的所有样式:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
如果我不将它们插入页面,则模式不起作用。
如何在不影响页面其他部分的情况下让这个模型工作?
或者有没有其他替代方法可以在页面上实现相同的结果?
谢谢你。
解决方案
您需要为 CSS 输入此链接标签
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
对于 javascript,在结束 body 标记之前将其添加到您的项目中</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
推荐阅读
- c++ - 如何修复我的 C++ 脚本中的运行时错误
- events - 当数据到达过期时间时向 RabbitMQ 发布事件
- arrays - 按组将 SAS 中的空值替换为下一个可用值
- r - 通过 R 中的部分匹配合并两个数据帧
- angular - MatAutocompleteTrigger 不适用于响应数据
- javascript - Apple Pay 界面在移动 Safari 上重定向后冻结页面
- sockets - Linux内核中的TCP/IP——控制套接字关闭超时
- r - 使用命令 metamean 为单个研究打包 meta 错误计算置信区间
- django - 使用文本框在 django 中搜索多个视图函数
- pandas - KeyError 即使密钥存在