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
Answer: Use the Bootstrap . modal('show') method modal('show') method for launching the modal window automatically when page load without clicking anything.
Normally links get opened in the same window in which they are clicked in. In order to open them in a new window, we add target="_blank" attribute to links. However to open the links in a separate popup window, we can make use of the onclick property and specifying a inline JavaScript code window. open as shown below.
To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes: data-toggle="modal" opens the modal window. data-target="#myModal" points to the id of the modal.
Data can be passed to the modal body from the HTML document which gets displayed when the modal pops up. To pass data into the modal body jquery methods are used. jQuery is similar to JavaScript, however jQuery methods are simple and easier to implement. jQuery reduces the lines of code.
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
There is a prettier way to add data
attributes in Rails. You can do something like this to get the same results.
<%= link_to 'Click Here', "#", data: {toggle: "modal", target: "#modal"} %>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With