AlertBox 팝업 레이어 정보 프롬프트 상자 효과 구현 steps

AlertBox 팝업 레이어 정보 프롬프트 상자 효과 구현 steps_javascript 기술

WBOY

풀어 주다： 2016-05-16 18:18:50

원래의

1169명이 탐색했습니다.

모방 라이트박스 효과에서는 이 효과가 기본적으로 달성되었습니다. 이번에는 주로 IE6의 지터 문제를 수정했습니다.
또한 IE6과 호환되도록 고정방식이 추가되었고, 오버레이가 리패키징되었으며, 프로그램이 컴포넌트 구조로 변경되었습니다.
호환 대상: ie6/7/8, firefox 3.6.8, Opera 10.6, safari 5.0.1, chrome 5.0

효과 미리보기http://demo.jb51.net/js/ AlertBox /index.htm

절차 설명

【구현원리】

팝업 레이어의 기본 원리는 이미 모방 라이트박스 효과에서 논의한 바 있습니다.
핵심은 위치 지정입니다. 일반적으로 상대 문서 위치 지정은 절대값이면 충분합니다.
화면과 함께 이동하려면, 즉 창을 기준으로 위치를 지정하려면 고정 위치 지정을 사용하세요.
고정 IE6이 지원되지 않는다는 점을 제외하면 구현이 매우 간단합니다.

【IE6 호환 문제 수정】

IE6 자체는 고정 위치 지정을 지원하지 않기 때문에 시뮬레이션이나 속임수를 통해 간접적으로만 구현할 수 있습니다.
가장 독창적인 방법은 윈도우의 스크롤 이벤트에서 팝업 레이어의 위치를 지속적으로 수정하는 것입니다.
나중에 누군가 리플로우를 통해 "이상하게" 달성할 수도 있다는 사실을 발견했습니다.
그러나 위의 방법에는 스크롤할 때 팝업 레이어가 "흔들어" 매우 불편하다는 결함이 있습니다(이징 등을 사용하여 개선 가능).

흔들림을 피하고 싶다면 html과 css의 영리한 적용을 통해 이를 달성할 수 있습니다. 자세한 내용은 14px 소개를 참조하세요.
몸통을 용기로 교체한 후 움직이지 않는 몸을 절대 위치시키는 것이 원칙입니다.
완벽해 보이지만 치명적인 문제가 있습니다. 이 방법은 html 구조를 수정해야 하며, 이는 창의 스크롤 이벤트와 같은 일부 관련 사항에 영향을 미칩니다.

프로그램에서는 또 다른 방법을 사용하는데, 이는 신체의 배경과 표현을 통해 이루어집니다. 다음은 호환되는 고정 효과입니다.

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

< div class="fixable">fixable

이것이 더 완벽하지만 몇 가지 문제도 있습니다. 예를 들어 신체의 배경은 고정만 가능하고 표현을 사용하면 상대적으로 많은 리소스가 소모됩니다.
더 큰 문제는 백분율 값이나 오른쪽/하단을 사용하여 위치를 지정할 수 없다는 것입니다.
이 문제를 해결하기 위해 프로그램은 위치 지정 레이어를 사용합니다. 이 레이어는 위의 방법을 사용하여 창 크기와 동일하며 위치는 일반적인 위치 지정 방법과 일치합니다. 이 레이어를 기준으로 위치를 지정하는 데 사용되면 상대 창 위치 지정 효과를 얻을 수 있습니다.

호환 프로그램은 주로 RepairFixed 개체에 있습니다. 먼저 본문 배경을 설정합니다.