jQuery로 깔끔한 끈적 창에 내용의 상단에 iframe을로드하는 방법

Question

임 단순히 chat.php

내가 이것을 넣어 고정 곳이 그나마

을 iframeing 추가되어 내 사이트로 간단한 chatbox 응용 프로그램을 통합 웹 페이지에서 오른쪽 상단의 사이트 콘텐츠 상단에 iframe을로드하려는 경우 (아약스 사용) 맨 위에 표시하지 않는 한 계속 표시됩니다.

대화방을 자동 트리거하여 채팅 기능이 활성화되면 (채팅 상자가 처음 활성화되었을 때 작성한 세션을 확인하여) 페이지로드간에로드되도록 자동 시작됩니다.

jquery 프레임 워크를 사용하지만 그다지 익숙하지 않습니다. 사이트는 PHP로 작성되었습니다.

은 내가 생각하는 것은 내가 ID chatbox와 빈 DIV이이

입니다. 누군가가 chatbox를보기 위해 링크를 클릭하면 해당 div 안에 iframe의 chat.php를로드하고 div를 오른쪽 상단 구석에 배치하는 클래스를 div에 추가합니다.

Answer 1

<style type="text/css"> 
#chatFrame { 
    display: none; 
    width: 300px; 
    height: 200px; 
    /* some more styles */ 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function() { 

    $('#activator').click(function() { 

     $('#chatFrame').html('<iframe border="0" frameborder="0" width="100%" height="100%" src="chat.php"></iframe>').show(); 
    }); 
}); 
</script> 

<a href="javascript:void(0);" id="activator">open chat</a> 
<div id="chatFrame"></div> 

Answer 2

간단하고 아주 솔직한 해결책 : PrettyPhoto (또는 다른 라이트 박스 스타일) 플러그인을 사용하십시오. 나는 그것을 위해 PrettyPhoto을 좋아

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

은 간단 모습입니다 지금까지 나는 아무 문제가 없었다.

코드는 다음과 같이 간단 할 수 있습니다

<a href="http://www.google.com?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" title="Google.com opened at 100%">Google.com</a> 

웹 사이트는 모든 세부 사항을 가지고있다.