Bootstrap Modal异常：无display:none且无法以模态框正常显示求助

嘿，我一眼就发现了核心问题——你把模态框的类名拼写错啦！这也是很多新手容易踩的坑~

1. 最关键的错误：类名拼写错误 #

你写的是 <div class="model fade" ...>，但Bootstrap模态框的正确类名是 modal，不是 model！这个拼写错误直接导致Bootstrap的CSS和JS无法识别这个元素，自然不会给它加上display: none初始样式，也不会应用固定定位的规则，所以它就变成了页面上的普通元素。

2. 其他优化与修正点 #

除了类名，还有几个小细节可以调整，让你的模态框更规范：

• 把关闭按钮从<a>标签改成<button>标签，更符合语义化，Bootstrap的样式也能完美适配
• 补充无障碍属性（aria-labelledby、aria-hidden），提升页面的可访问性
• 确保你已经正确引入了Bootstrap的CSS和JS文件（注意顺序：先加载jQuery，再加载Bootstrap JS，CSS要放在最前面）

修正后的完整代码 #

<div class="profile-Photo-container">
  <a href="#" data-target="#profile-pic-upload" data-toggle="modal">
    <img class="profile-photo" src="" />
  </a>
  <div class="modal fade" id="profile-pic-upload" tabindex="-1" role="dialog" aria-labelledby="profilePicModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title" id="profilePicModalTitle">Profile Picture</h3>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Add stuff here</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Edit Profile Picture</button>
        </div>
      </div>
    </div>
  </div>
</div>

验证资源引入 #

如果修正类名后还是有问题，检查一下页面头部的资源引入是否正确，示例如下：

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="path/to/bootstrap.min.css">
<!-- jQuery（Bootstrap JS依赖它） -->
<script src="path/to/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="path/to/bootstrap.min.js"></script>

这样调整之后，你的模态框应该就能正常工作了——初始状态会隐藏，点击链接后会以固定定位的方式居中显示在页面上~

内容的提问来源于stack exchange，提问作者Lex Eichner