JQuery를 사용하여 웹 표준을 준수하는 QQ 팝업 메시지 만들기_jquery

여기서 언급된 팝업 메시지는 웹 페이지의 오른쪽 하단에 오르락내리락하는 일종의 프레임을 의미하며 여기에는 jQuery의 사용자 정의 애니메이션이 사용됩니다. flash의 그래디언트 애니메이션, 시작과 끝의 두 가지 키 프레임이 정의되어 있으면 중간의 애니메이션 프로세스가 자동으로 완료됩니다. jQuery 도움말 문서를 확인하려면 jQuery를 알아야 합니다.

기본 아이디어는 다음과 같습니다. 첫 번째 팝업 메시지 상자는 실제로 페이지가 로드된 후 div 레이어를 오른쪽 아래에 배치해야 합니다. CSS를 통해 페이지 모서리를 숨긴 다음 페이지의 버튼을 클릭하면 애니메이션 기능이 실행되고 시각적인 느낌을 높이기 위해 div 레이어가 아래에서 위로 올라오기 시작합니다. , 상승 과정에서 투명도 그라데이션이 있고, 레이어에 닫기 버튼이 있는데, 클릭하면 또 다른 애니메이션 기능이 실행되고, div 레이어가 내려갑니다. 다음은 공식적으로 test.html의 소스 코드입니다:

코드 복사 코드는 다음과 같습니다.

 

 
 
     
     
     
     
 
 
   

 
   

 
     
   

 
   

 
   

 
   

 
        유신용户注册 
        关闭 
   

 
 



위 코드는 테스트를 거쳤으며 작동합니다. 하지만 여러 브라우저에서 테스트해 보면 IE6, IE7, IE8B2, OPERA, CHROME 브라우저에서 동일한 효과를 볼 수 있습니다. Firefox에서는 애니메이션이 아래에서 위로 나와야 하는데 지금은 위에서 아래로 되어 있는 것을 알 수 있습니다.
제가 직접 확인한 후, 그리고 선생님의 도움을 받아, 문제가 마침내 해결되었습니다:

이 문제의 핵심은 Firefox가 페이지의 루트 요소로 html을 사용하는 반면 IE는 body를 루트 요소로 사용한다는 것입니다. 본문 높이를 1800px로 설정했지만 Firefox에서는 html 요소의 높이가 여전히 0이므로 div#pop이 실제로 맨 위에서 시작됩니다.

수정 방법은 매우 간단합니다. CSS 설정만 추가하면 됩니다.

html{
높이:100%
}

이렇게 하면 처음에는 html의 높이가 브라우저 창을 채우고 팝은 아래쪽으로 이동하게 됩니다. 효과는 IE에서와 똑같습니다.

그래서 JS를 할 때 CSS는 매우 중요한 기초입니다. CSS를 아주 명확하게 이해해야 합니다.

최종 소스코드는 다음과 같습니다.

코드를 복사하세요 코드는 다음과 같습니다.

 

 
 
     
     
     
     
 
 
   

 
   

 
     
   

 
   

 
   

 
   

 
        유신용户注册 
        关闭