在rials 中使用bootstrap 的modal对话框 实现一个弹窗显示多层次内容的方法
来源:互联网 发布:wumpus java 游戏编码 编辑:程序博客网 时间:2024/06/07 00:15
在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); })
0 0
- 在rials 中使用bootstrap 的modal对话框 实现一个弹窗显示多层次内容的方法
- 在BootStrap的modal中使用Select2
- ueditor在bootstrap的modal中显示,高度无法自适应
- 在Bootstrap的modal中使用select2出现不能显示下拉框问题解决办法
- angularjs使用bootstrap在modal中使用nav并且不让modal外的数据刷新
- bootstrap modal在项目的实现思路
- bootstrap中modal的简单使用
- 如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
- bootstrap 模态框(modal)实现水平垂直居中显示的方法
- bootstrap modal 在IOS9中不能弹出的问题 IOS 9 bootstrap modal ios 9 noticework
- angular-bootstrap中modal显示不了的问题解决
- bootstrap-如何在modal中使用collapse
- bootstrap datepicker 在bootstrap modal中不显示问题
- bootstrap datepicker 在bootstrap modal中不显示问题
- 在Asp.net MVC 使用bootstrap 的modal dialog 实现Popup
- ng中在主页面弹出bootstrap的modal
- 在BootStrap的modal中使用Select2搜索框无法输入
- bootstrap中使用actionFormatter跳转modal并传递数据的
- 获取iOS设备信息
- Section 10 Statics, Running Order and Access Level
- 深入 Java 调试体系,第 2 部分: JVMTI 和 Agent 实现
- 深入 Java 调试体系,第 3 部分: JDWP 协议及实现
- 深入 Java 调试体系,第 4 部分: Java 调试接口(JDI)
- 在rials 中使用bootstrap 的modal对话框 实现一个弹窗显示多层次内容的方法
- KE02 实现一次硬件触发转换多个通道
- windows下Qt与lua结合简单介绍
- 使用 Java Debug Interface(JDI)调试多线程应用程序
- 通信系统调制解调基本原理
- Oracle学习笔记[1]----Oracle简介、安装与卸载
- 11_Android中HttpClient的应用,读取网络xml及xml解析流,Handler的应用,LayoutInflater的使用,SmartImageView的使用
- 写给在路上的自己
- 【UNIX网络编程学习】线程特定数据