Using Twitter Boot Modals as Rails 4?

Does anyone know about a gem that will allow me to easily implement an action as modal, without having to include modal markup on every page.

For example, I want the “new” action for one of my controllers to always be modal ...

Basically, I would like you to be able to make the action modal, so that I can go

def new
  render layout: "modal"
end

When I paint layout, where I really want the basic layout of the app is downloaded, but I also need the other built-in layout (without the use of variables, and rendering the partial view in my opinion), which would wrap all the necessary .modal, .modal-dialogand .modal-contentis divided around the code in my template new .html.erb, which of course will look like

<div class="modal-header">
  <h4>Yay!</h4>
</div>
<div class="modal-body clearfix">
  <p>Seamless modals rock!</p>
</div>

Any links to this action will not be unusual and do not require adding data-toggle, etc., and you can also visit the action by entering the URL manually, because when you render layout: "modal"rails also include $('#myModal').modal('show')a function on.load- wrapped or something similar, and your modal mode is launched when the page loads. This can be done to work well with turbo sciences.

, , - . , , .

, , SEO.

UPDATE

, , , UX, , , :

  • , , , , . , ?
  • , , javascript, .

turbolinks , , , , , , .

+4
1

, :


- , DIV ( CSS/JS, )

, , , . , CSS JS,


new , :

  • (ajax) ( ).
  • ajax
  • ajax

:

#app/views/your/action.html.erb
<%= link_to "New", new_modal_path, id: "modal_path" %>

#app/views/your/new.html.erb
<div id="myModal">
    <div class="modal-header">
        <h4>Yay!</h4>
    </div>
    <div class="modal-body clearfix">
        <p>Seamless modals rock!</p>
    </div>
</div>

#app/controllers/your_controller.rb
def new
    respond_to do |format|
        format.html { render layout: !request.xhr? } #renders naked html if ajax
    end
end

#app/assets/javascripts/application.js.erb
$("#modal_path").on("click", function() {
    $.ajax({
        url: $(this).attr("href");
        success: function(data) {
            $(data).appendTo("body");
            $('#myModal').modal('show');
        }
    });
});

+4

Source: https://habr.com/ru/post/1527244/


All Articles