求教：如何将一个页面上的数据显示到一个modal的modal-body上

Question

点击按钮生成动态形成的网页，页面上是取到的json数据，我想点击按钮弹出modal，动态网页上的数据在modal的modal-body上显示，应该怎么做？求教。

Answer 1

首先从网页上获取数据，然后可以拼接html或者用模版引擎生成要在modal-body展现的html，最后append到modal-body上就行了

Answer 2

html

<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#dialog" data-action="add-record">添加数据</button>
<div class="modal fade" id="dialog" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">对话框</h4>
      </div>
      <div class="modal-body">
        <p><i class="icon-spinner icon-spin"></i> 加载中...</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="submit" class="btn btn-primary">确定</button>
      </div>
    </div>
  </div>
</div>

Javascript

//对话框
$('#dialog').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget);
  var action = button.data('action');
  var modal = $(this);
  switch(action)
  {
    case 'add-record':
      //这里插入获取数据的代码
      //...
      modal.find('.modal-title').text('添加数据');
      modal.find('.modal-body').html('此处写入接收的json数据');
    break;
  }
})