如何使用 link_to 添加 bootstrap modal 以便链接内容在 modal 中打开? [英] How to add bootstrap modal with link_to so the link content open in modal ?

查看：23
本文介绍了如何使用 link_to 添加 bootstrap modal 以便链接内容在 modal 中打开?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用引导模式 http://twitter.github.com/bootstrap/javascript.html#modals 在 rails 链接上打开该链接在模态 

<%= link_to page_path, target: '_blank' %>

但不知何故它不起作用.标准的切换代码是 - 

<a data-toggle="modal" href="#myModal" class="btn">启动演示模式</a>

但我不确定如何将其应用于 rails 中的 link_to，有什么帮助吗?

谢谢

解决方案

下面是代码，如果你想在隐藏状态下在页面上预加载模态

<%= link_to "Open modal", "#my-modal", :class =>"btn", "数据切换" =>模态"%><div class="modal hidefade" id="my-modal" title="我的modal"><div class="modal-header"><button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button><h3 id="myModalLabel">模态标头</h3>

<div class="modal-body">模态体

<div class="modal-footer"><button aria-hidden="true" class="btn" data-dismiss="modal">关闭</button>

如果你想通过ajax加载模态，那么你可以做这样的事情

<%= link_to "Open modal", new_post_path, :class =>"btn", :remote =>真，数据切换"=>模态"，数据目标"=>我的模态"%><div class="modal hidefade" id="my-modal" title="我的modal"><div class="modal-header"><button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button><h3 id="myModalLabel">新帖子</h3>

<div class="modal-body a-unique-class">新柱体

<div class="modal-footer"><button aria-hidden="true" class="btn" data-dismiss="modal">关闭</button>

在 posts/new.js.erb 中，你会包含

$(".a-unique-class").html('<%= j render "posts/_form" %>')

确保每个模态体都有一个唯一 id 或 class.

假设您想使用模态表单创建一个新帖子，控制器代码和 _form.html.erb 就位

I am trying to use bootstrap modal http://twitter.github.com/bootstrap/javascript.html#modals on a rails link to open that link in the modal 

<%= link_to page_path, target: '_blank' %>

but somehow it is not working. The standard toggle code is - 

<a data-toggle="modal" href="#myModal" class="btn">Launch demo modal</a>

but I am not sure how to apply it to link_to in rails, any help ?

Thanks

解决方案

Below is the code if you want to preload the modal on the page in hidden state

<%= link_to "Open modal", "#my-modal", :class => "btn", "data-toggle" => "modal" %>
<div class="modal hide fade" id="my-modal" title="My modal">
  <div class="modal-header">
    <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    Modal Body
  </div>
  <div class="modal-footer">
    <button aria-hidden="true" class="btn" data-dismiss="modal">Close</button>
  </div>
</div>

And if you want to load the modal through ajax then you can do something like this

<%= link_to "Open modal", new_post_path, :class => "btn", :remote => true, "data-toggle" => "modal", "data-target" => "my-modal" %>
<div class="modal hide fade" id="my-modal" title="My modal">
  <div class="modal-header">
    <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
    <h3 id="myModalLabel">New Post</h3>
  </div>
  <div class="modal-body a-unique-class">
    New Post Body
  </div>
  <div class="modal-footer">
    <button aria-hidden="true" class="btn" data-dismiss="modal">Close</button>
  </div>
</div>

In posts/new.js.erb you would include

$(".a-unique-class").html('<%= j render "posts/_form" %>')

Make sure that you have a unique id or class for every modal body.

Assuming you want to create a new post using modal form, the controller code and _form.html.erb is in place

这篇关于如何使用 link_to 添加 bootstrap modal 以便链接内容在 modal 中打开?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆