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

나는 다음과 같은 한 :

,

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