踩坑，bootstrap model模型态不弹出

最新推荐文章于 2024-05-08 13:15:46 发布

听风执酒

最新推荐文章于 2024-05-08 13:15:46 发布

阅读量2.2k

点赞数

文章标签： html5 前端

本文链接：https://blog.csdn.net/weixin_44763213/article/details/123732745

版权

今天使用BootStrap 模态框，按照官方的代码复制下来，引用了bootstrap.css,Bootstap.js,Jquery.js；但是发现点击按钮后，模态框不弹出
在这里插入图片描述
html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="staties/bootstrap.min.css">
    <script src="staties/bootstrap.js"></script>
    <script src="staties/jquery-3.6.0.js"></script>
</head>
<body>
<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
 模态框（Modal）
<div class="modal fade" id="myModal" 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">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">在这里添加一些文本</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
</html>插入代码片

我以为是js文件的问题，但是换了很多发现都没有效果，最后我查看控制台，发现是因为bootstrap.js引入的时候需要用到JQuery.js，而我的引入，JQuery.js在BootStrap.js之后，所以没能加载成功
在这里插入图片描述
切换两个文件的引入顺序，将JQuery.js放在BootStrap.js之前就能成功的弹出模型框

	<link rel="stylesheet" href="staties/bootstrap.min.css">
    <script src="staties/jquery-3.6.0.js"></script>
    <script src="staties/bootstrap.js"></script>

在这里插入图片描述

听风执酒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
踩坑，bootstrap model模型态不弹出

今天使用BootStrap 模态框，按照官方的代码复制下来，引用了bootstrap.css,Bootstap.js,Jquery.js；但是发现点击按钮后，模态框不弹出html代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" hr
复制链接

扫一扫