DIV w/jQuery에 내용로드 문제가 발생했습니다.

Question

div가 기본적으로 숨겨져 있고 버튼 클릭으로 표시하려고합니다. div가 style = "display : none;"으로 설정되지 않은 한 내 코드는 정상적으로 작동합니다. 이 설정을 마치면 DIV가 스타일 시트를 올바르게로드하지 않습니다. 단추를 클릭 할 때 페이지로드를 초기화하는 코드가 필요하다고 생각합니다. 여기 내가 사용하고 jQuery를은 다음과 같습니다

jQuery(document).ready(function(){ 
    jQuery('#overlayHide').live('click', function(event) {   
     jQuery('#overlay').toggle('show'); 
    }); 
}); 

는 다시,이 코드는 잘만큼 내가 페이지가로드 될 때 사업부는로드 할 수로 작동합니다. 표시 설정을 시도하자마자 : none로드시 CSS가 엉망으로 보입니다. 내가 디스플레이 설정하지 않는 한 그것은 잘 한 일

<div id="overlay" style="display:none;"><iframe id="contactIframe" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" width="500" height="500" scrolling="np" height="400" src="http://foobar.com/contact/demo.php"> 
</iframe></div> 


jQuery(document).ready(function(){ 
    jQuery('#overlayHide').click(function(event) {   
     jQuery('#overlay').toggle('slow'); 
    }); 
}); 

:

여기 내 코드 숨겨진,하지만 난 사업부는 페이지로드에 숨겨져 할 필요가있다.

Answer 1

을 별도의 파일에 iframe을 표시 한 다음 AXAJ를 사용하여 별도의 파일을 DIV ...로로드하여 수정합니다.

Answer 2

그것은 slow의 show 아니다 :

jQuery('#overlay').toggle('slow'); 

가 documentation을 읽어 보시기 바랍니다.

편집 :
더 많은 정보를 제공하지 않으며, iframe을 내부에 사용되는 플러그인이 working 잘 거기 때문에, 나는이 같은 off-left technique 것을 사용하는 것이 좋습니다 : I가 관리

jQuery(document).ready(function(){ 
    jQuery('#overlayHide').live('click', function(event) {   
     jQuery('#overlay').toggleClass('hideMe'); 
     return false; 
    }); 
});