前端框架-Bootstrap【搭建后台管理系统】
模态框:
不同的按钮打开同一个id=myModal的模态框,有时候需要传入一个参数(flag)来进行区分是哪一个按钮打开的
那么直接上代码了
第一个按钮button属性里面加入data-whatever="add"
1 <button id="sure_pre_release_draft" type="button" data-toggle="modal" data-target="#myModal" data-whatever="add" class="btn btn-primary btn-sm"> 2 <span class="glyphicon glyphicon-plus"></span> 3 </button>
第二个按钮button属性里面加入data-whatever="edit"
1 <button id="sure_pre_release_draft" type="button" data-toggle="modal" data-target="#myModal" data-whatever="edit" class="btn btn-primary btn-sm"> 2 <span class="glyphicon glyphicon-plus"></span> 3 </button>
然后通过模态框触发事件来获取
1 $("#myModal").on("show.bs.modal",function(e){ 2 //获得点击打开的按钮 3 var button=$(e.relatedTarget); 4 //根据标签获得按钮传入的参数 5 var recipient=button.data("whatever"); 6 //console.log(recipient); 7 if(recipient == "edit"){ 8 do something............. 9 } 10 if(recipient == "add"){ 11 do something............. 12 } 13 });
原理来源:https://v3.bootcss.com/javascript/#modals-related-target
人生苦短,我用python!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳,地球,月球 运作规律
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具