1

相当随机的行为，我正在调用一个模态对话框来显示部分内部。

我正在使用 simple_form + bootstrap 和 jquery-ui。

调用该函数的按钮在视图中有以下代码：

<p><%= link_to 'New Boots', new_boot_path, :class => 'btn btn-primary pull-right', :remote => true, :id => 'new_boot_link' %></p>

在我的意见/靴子/新的代码是这样的：

<div id="content">
<%= render :partial => 'form' %>
</div>

并在 views/boots/_form 以下

<%= simple_form_for(@boot, :html => { :class => 'form-vertical' }, :remote => true) do |f| %>
<fieldset>
    <%= f.input :number %>
    <%= f.input :size, :collection => boot_size_options %>
    <%= f.input :condition, :collection => boot_condition_options %>
    <%= f.input :brand , :collection => boot_brand_options %>
</fieldset>
    <div class="form-actions">
    <%= f.button :submit, :class => 'btn btn-primary' %>
    <%= submit_tag 'Reset', :type => :reset, :class => "btn btn-danger" %>
    </div>
<% end %>

在 application.js 我有以下内容：

$(document).ready(function() {


        $('#new_boot_link').click(function(e) {
        var url = $(this).attr('href'); 
        $('#modal').dialog({
                title: "New Boots",     
                draggable: true,
                resizable: false,
                modal: true,
                width:'auto',
                open: function() {
                        return $(this).load(url + ' #content');}
        });
        });
    });

所以模态应该正常工作，但它出现在屏幕底部，但是如果我关闭它并再次单击按钮，它会显示在中间，就像它应该首先完成的那样。

是css吗？我想也许不是，否则它会继续在同一个地方不断出现......所以我不知道我调用函数的方式是什么？

欢迎提出建议，这是一个非常烦人的故障！

4

2 回答 2

1

很抱歉之前的错误。不幸的是，我无法亲自重现您的问题。我怀疑这会有所帮助，因为它将转换 DIV 和随叫随到的填充和显示。

$(document).ready(function(){
var modal=$('#modal');
$('#new_boot_link').click(function(e) {
  var url = $(this).attr('href'); 
  modal.load(url + ' #content',function(){
    modal.dialog("open");
  });
});
modal.dialog({ autoOpen: false, title: "New Boots", draggable: true,
resizable: false, modal: true, width:'auto'});
});
于 2012-04-27T21:47:23.557 回答
0

包括：jQuery 中心

改成：

$(document).ready(function() {


    $('#new_boot_link').click(function(e) {
    var url = $(this).attr('href'); 
    $('#modal').dialog({
            title: "New Boots",     
            draggable: true,
            resizable: false,
            modal: true,
            width:'auto',
            open: function() {
                    return $(this).load(url + ' #content');}
            });
    }).center(false);
});

这会将您的对话框设置在页面的中间。

如果您有特定的地方要显示对话力：

..}).css({position:"relative"}).css("left",null).css("top",null);
// Last too remove value of left and top. Trick with {left:null,top:null} does not work!
于 2012-04-27T17:03:59.793 回答