【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:
            
          
        
      
      

        Close
        Send 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代码别忘了加分号~