jquery UIダイアログがページの末尾に表示されます

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> 

を/新しいコードはこれです：

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

とビュー/ブーツ/ _formで

application.jsに次

<%= 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 %> 

iは、次ています

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