在rials 中使用bootstrap 的modal对话框 实现一个弹窗显示多层次内容的方法

在rials 中使用bootstrap 的modal对话框 实现一个弹窗显示多层次内容的方法

应用场景：在主界面有个按钮，点击以后显示一个弹窗，是用户列表。在列表中的一个记录上再次点击，在这个弹窗里面显示这个用户的详细信息。

1. 在主控界面加入一个bootstap的modal 对话框div.我用

<%= render :partial => "modal/modal" %>

这种方法来嵌入一个 公共视图
2. 这个modal因为是用于公共显示的，所以没有任何实质UI内容。代码如下:

<%= stylesheet_link_tag "modal/modal" %>
<%= javascript_include_tag "modal/modal" %>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" style="width:800">
    <div class="modal-content" id="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>
      <div class="modal-body">

      </div>
      <!-- <div class="modal-footer"> -->
        <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> -->
      <!-- </div> -->
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

1. 在主控界面上用javascript来打开这个模式窗口。下面的代码是js coffee的代码。是通过一个button的onClick响应来调用的js 代码

window.fun_match_info_list = () ->
    $('#myModal').modal({backdrop:'static'});
    $('#myModalLabel').html('参数信息');        $('#embed_ifame').attr('src',"/match_info_list_by_current_user");

1. 总体的思路是：在一个modal里面嵌入一个iframe。所有rails controller 进行渲染的 返回内容都会 回到这个 iframe里面。这样就不会去渲染上一级的html 了。
2. 同时，为了使得这个modal弹窗，显示任何一个view的内容。除去用ifame来容纳rails controller 的render 内容外，还必须进行原有的内容的删除和新内容的添加。这就要用到javascript的dom对象操作来对html进行处理。js代码如下:

$('#myModal').on('hidden.bs.modal', function (e) {
        // 去除模式对话框里面的数据
        $("#embed_ifame").remove();
    }).on('show.bs.modal', function (e) {
        // 去除模式对话框里面的数据
        iframe_html_string = '<iframe id="embed_ifame" width="100%" height="100%" scrolling="no" style="overflow-x:none;overflow-y:none"/>';
        $("#myModal .modal-body").append(iframe_html_string);
    })