【Bootstrap】modal模态框动态修改标题或其他内容

       最近用bootstrap的模态框做一个表记录的修改和新增，考虑代码的复用性这两个功能肯定是使用一个模态框，但是标题肯定需要修改成“新增xxx”和“修改xxx”，最开始的思路是在点击事件中通过id获取标题所在的标签，然后修改标签里的内容，结果当然是行不通，F12也看不出什么问题，直觉告诉我在模态框初始化的时候一定发生了什么事情，于是去bootstap的官网查开发文档，然后发现了一个很有意思的demo，完美解决了我的问题。传送门在此->>>>>

官网实例截图如下，方便各位查找。

 先贴一段官网上的HTML代码，后面慢慢讲；

Open modal for @mdo
Open modal for @fat
Open modal for @getbootstrap
New message
×
Recipient:Message:
CloseSend message

然后是JS代码

$('#exampleModal').on('show.bs.modal', function (event) {var button = $(event.relatedTarget) // Button that triggered the modal//注意这里的whatever对应前面html代码中button标签下data-whatever属性的后半段var recipient = button.data('whatever') // Extract info from data-* attributes// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.var modal = $(this)//此处即为修改modal的标题modal.find('.modal-title').text('New message to ' + recipient)modal.find('.modal-body input').val(recipient)
})

官网的这个demo实现的是三个按钮共用一个modal，但是通过三个按钮打开的三个modal标题和一个文本框里的内容都不一样，即实现了动态修改不仅仅是modal的标题，还有modal里面包含的一些元素。

实现方法利用了modal的“show.bs.modal”事件，大概就是在modal显示时触发。通过button标签的data-whatever属性来获取参数，可以理解为modal通过这个属性来传参，值得注意的是，这个属性是可供开发者自定义的，比如我使用的是data-title，那么相应的，我只需要将js代码中的“var recipient = button.data('whatever')”‘whatever’替换为‘title’。

末尾提一句，js代码别忘了加分号~

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！