Back

jquery - 添加dialog的步骤, 使用jquery ui

发布时间: 2017-11-28 06:44:00

1 页面中要导入jquery, jqueryui, 

2 为页面底部加上： 

$(function() {
  $('body').append("<div id="dialog" style="display:none"></div>")
  global_dialog = $( "#dialog" ).dialog({
    autoOpen: false,
    modal: true,
    width: '60%'
  }); 
});
function open_dialog(url){
  global_dialog.dialog('open');
  $.get(url,function(data){
    global_dialog.html(data)
  })  
}
function close_dialog(){
  $('#dialog').dialog('close')
}

就可以了

3. 在html （以rails erb为例子) 中，可以直接调用：

<form ... 
   <%= f.submit "确定", class: "btn btn-primary btn-small" %>
   <%= link_to_function '返回', 'close_dialog()', class: "btn btn-default btn-small" %>
</form>

Back