写写代码：Bootstrap Modal 动态加载内容

Bootstrap 中，Modal 对话框，通常默认打开的是显示静态的文本提示信息。

但是如果页面中有多外需要显示，而且希望展示的页面信息是动态的时候，默认的代码就不能满足要求了。

<a class="error_detail" href="" data-id="/error_detail?id=1" data-toggle="modal" data-target="#modal">ID1 item.3 }}</a></td>
....

<a class="fail_detail" href="" data-id="/error_detail?id=2" data-toggle="modal" data-target="#modal">ID2</a>

上面是点击的链接，不同的链接里面的data-id不同。

下面是Modal相关代码，包括Javascript
注意使用时需要另外引用 Jquery 和bootstrap 相关的JS，CSS

<div class="modal fade" id="modal" aria-hidden="true">
  <div class="modal-lg" role="document" style="margin:auto;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">Error Detail</h4></div>
      <div class="modal-body" style="overflow-x: auto;"></div>
    </div>
  </div>
</div>
<script>$(function() {
    $(".error_detail").click(function() {
      var lurl = String($(this).data('id'));
      $(".modal-title").html("<img src='/images/loading.gif' style='padding-left:50px;'></img>");
      $(".modal-body").hide();
      $(".modal-body").load(lurl);
    });
  });</script>

另外也可以尝试使用eModal ，ref: http://saribe.github.io/eModal/#demo
但不知道是不是访问速度问题还是其它问题，我在它演示网站没有成功过。

转载请注明：Linc Hu » 写写代码：Bootstrap Modal 动态加载内容