使用jquery-ui 弹出dialog对话框 modal
1.安装上gem jquery-ui-rails 之后
In your Gemfile, add:
gem 'jquery-ui-rails'
Require Everything
To require all jQuery UI modules, add the following to your application.js:
//= require jquery-ui
Also add the jQuery UI CSS to your application.css:
/* *= require jquery-ui */
2.页面上js
$(function() { $( "#dialog" ).dialog({ autoOpen:false, modal: true, }); }); //打开弹窗 function open_dialog(url){ $( "#dialog" ).dialog('open'); $.get(url,function(data){ $('#dialog').html(data) }) } //关闭弹窗 function close_dialog(){ $('#dialog').dialog('close') }
html:
<div id="dialog" title="新建工序" style="display:none"></div> <%= link_to_function '新增', "open_dialog('/steps/ajax_new_form?craft_id=#{params[:craft_id]}')", id: "opener", class: 'btn btn-primary' %>
关闭按钮:
<%= link_to_function '返回', 'close_dialog()', class: "btn btn-default btn-small" %>
注意: rails及以后是不可以直接使用link_to_function的要在application helper里面 加上
def link_to_function(name, *args, &block) html_options = args.extract_options!.symbolize_keys function = block_given?? update_page(&block) : args[0] || '' onclick ="#{"#{html_options[:onclick]};" if html_options[:onclick]}#{function}; return false;" href = html_options[:href] || '#' content_tag(:a, name, html_options.merge(:href => href, :onclick => onclick)) end