Bootstrap 5 Modal 不显示？原因与解决方案详解

聖光之護

发布时间：2026-02-05 12:20:02

292人浏览过

来源于php中文网

原创

Bootstrap 5 Modal 不显示？原因与解决方案详解

bootstrap 5 废弃了 v4 中的 `data-toggle` 和 `data-target` 属性，改用 `data-bs-toggle` 和 `data-bs-target`，若未更新这些属性，模态框将完全失效。

在 Bootstrap 5 中，为增强命名空间隔离性与框架可维护性，所有 JavaScript 触发的 data 属性均统一前缀为 data-bs-。这意味着你不能再使用 Bootstrap 4 风格的 data-toggle="modal" 或 data-target="#myModal" —— 它们在 Bootstrap 5 中已被完全移除，不会触发任何行为，控制台也不会报错，导致模态框“静默失效”。

✅ 正确写法（Bootstrap 5）：


  Doesn't have an account yet? 
  
    Create an account
  



  
    
      
        Create Account
        
      
      
        
        
          
            Email address

⚠️ 注意事项：

亿众购物系统

一套设计完善、高效的web商城解决方案，独有SQL注入防范、对非法操作者锁定IP及记录功能，完整详细的记录了非法操作情况，管理员可以随时查看网站安全日志以及解除系统自动锁定的IP等前台简介：　　1）系统为会员制购物，无限会员级别。　　2）会员自动升级、相应级别所享有的折扣不同。　　3）产品可在缺货时自动隐藏。　　4）自动统计所有分类中商品数量，并在商品分类后面显示。　　5）邮件列表功能，可在线订阅

下载

确保已正确引入 Bootstrap 5 的 CSS 与 JS（推荐使用官方 CDN，且 JS 必须在 DOM 后加载或置于 body 底部）；
data-bs-dismiss="modal" 用于关闭按钮，同样不可写作 data-dismiss；
tabindex="-1" 仍需保留，以支持键盘焦点管理；
若使用 jQuery：Bootstrap 5 完全移除了 jQuery 依赖，因此无需引入 jQuery，也不支持 $('#myModal').modal('show') 等 jQuery API —— 应改用原生 JavaScript 实例方法（如 new bootstrap.Modal(document.getElementById('...')).show()）。

? 小结：从 Bootstrap 4 升级至 5 时，务必全局搜索替换 data-toggle → data-bs-toggle、data-target → data-bs-target、data-dismiss → data-bs-dismiss，这是最常见也最容易被忽略的兼容性陷阱。一次替换，立解模态框不显示之困。

如何在PHP中将MySQL数据库中的Base64图片用作网页背景图

PHP表单如何获取文本域多行内容_获取多行内容PHP表单用法【文本】

php页面怎么加水平渐变特效_php页面水平渐变实现法【步骤】

PHP表单怎样美化输入框样式_CSS美化PHP表单输入框法【外观】

php页面渐变能做波浪动效吗_php页面波浪渐变动画法【技巧】

相关标签:

css javascript java jquery js bootstrap ai cdn red jquery bootstrap 命名空间 JS dom

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：php页面渐变能叠加图片吗_php页面渐变叠加图片法【技巧】下一篇：PHP 表单提交时的服务器端验证与数据回显完整教程

作者最新文章

墨墨背单词怎么删除之前选定的书

2026-02-04 16:53

如何在 pytest 测试函数中延迟初始化测试对象（而非在参数收集阶段）

2026-02-04 16:59

如何使用 Selenium 提取指定 div 中所有图片链接

2026-02-04 17:24

如何使用正则表达式提取带前后空格的域名字符串

2026-02-04 17:28

配音演员履历意外泄密！《异度神剑》2026年或有新作

2026-02-04 17:31

如何在 Pandas 中跨多个列高效匹配两个 DataFrame 的行组合

2026-02-04 17:35

如何根据用户选择的请假类型动态限制日期范围

2026-02-04 17:35

如何在 Go 中优雅地扩展 time.Time 类型并避免重复类型转换

2026-02-04 17:37

如何在 Go 中安全并发请求多个 URL（避免 EOF JSON 错误）

2026-02-04 17:38

skyworth万能遥控器如何使用

2026-02-04 17:38

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

jquery插件有哪些

jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容，供大家免费下载体验。

151

2023.09.12

jquery怎么操作json

操作的方法有：1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”；3、“$.each(obj, callback)”；4、“$.ajax()”。更多jquery怎么操作json的详细内容，可以访问本专题下面的文章。

313

2023.10.13

jquery删除元素的方法

jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题，详情请看本专题下面的文章。php中文网欢迎大家前来学习。

399

2023.11.10