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

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

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

    

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

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

然后是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代码别忘了加分号~