欢迎来到cool的博客
7

Music box

Click to Start

点击头像播放音乐
新博客链接

使用jquery-ui 弹出dialog对话框 modal

jquery-ui
参考原文


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 

返回列表