Question

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

我正在使用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>

在我的views / boots / new中代码是这样的：

<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吗？我想也许不是，否则它会继续在同一个地方不断出现...所以我不知道我是否正在调用这个函数？

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

Answer 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'});
});

Answer 2

包括：jQuery Center

更改为：

$(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!

jquery ui对话框出现在页面底部

2 个答案: