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

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

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

在主控界面加入一个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">×</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 -->

在主控界面上用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");

总体的思路是：在一个modal里面嵌入一个iframe。所有rails controller 进行渲染的 返回内容都会 回到这个 iframe里面。这样就不会去渲染上一级的html 了。

同时，为了使得这个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);
})