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

모방 라이트박스 효과에서는 이 효과가 기본적으로 달성되었습니다. 이번에는 주로 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 구조를 수정해야 하며, 이는 창의 스크롤 이벤트와 같은 일부 관련 사항에 영향을 미칩니다.

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

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

fixable

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

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



코드를 복사합니다


코드는 다음과 같습니다:

if (body.currentStyle.BackgroundAttachment !== "fixed") { if (body.currentStyle.BackgroundImage === "none") { body.runtimeStyle.BackgroundRepeat = " 반복 없음"; body.runtimeStyle.BackgroundImage = "url(about:blank)" } body.runtimeStyle.BackgroundAttachment = "수정됨"; }

포지셔닝 레이어 다시 생성:




코드 복사

코드는 다음과 같습니다.

layer = document.createElement("

"); 포지셔닝 레이어도 "overflow:hidden"으로 설정해야 합니다. 장점은 팝업 레이어가 외부에 있기 때문에 문서가 자동으로 확장되지 않는다는 것입니다. 문서의 원래 범위. ie6은 다음 코드를 테스트합니다. 문서는 아래로 스크롤할 때 계속 확장됩니다.

코드 복사

코드는 다음과 같습니다. 다음과 같습니다:

fixable

加上"overflow:hidden"就可以防止这种情况。

然后弹出层通过append方法修改为"absolute"定位，并插入到这个定位层，这样就能实现fixed效果了。

由于这个定位层比较耗资源，所以在有元素插入时才会插到body中。
在不需要fixed的时候，要用remove方法从定位层中移除，当定位层内没有需要定位元素就会自动从body移除。
ps：隐藏的话expression还会继续执行，要移出文档才行。

【居中效果】

加入居中扩展程序，并且设置center为true，就会自动相对窗口居中。
居中的原理跟仿Lightbox效果是一样的，通过设置负的元素尺寸一半的margin和"50%"的top/left来居中。
要注意的是不是使用fixed定位时，计算需要加上scrollTop/scrollLeft。

【覆盖层】

在仿Lightbox效果中，ie6的覆盖层是通过创建一个覆盖整个页面的层来做的。
使用新的兼容fixed方法后，就不用另外做兼容，按照fixed的效果做就行了。
覆盖层是由AlertBox扩展而来，它其实就是一个大小跟窗口一样，并且跟窗口重合的弹出层。
由于覆盖层一般只需要定义一个就行了，这里把它做成一个OverLay对象，使用时直接调用它的show和close方法。

【遮盖select】

在仿Lightbox效果中介绍过两种遮盖select的方法：隐藏和iframe。
程序是通过iframe来遮盖的，放在ie6的兼容扩展程序中。
在iframe定位时要注意，要定位到弹出层的负的clientTop/clientLeft，这样才能保证边框不会被遮住。

使用技巧

【定位】

除了居中，程序会按照弹出层本身的定位样式来显示。
不是fixed定位时要注意，在ie6是相对当前窗口来定位的，其他都是相对第一屏窗口来定位的。
还要注意，必须声明DOCTYPE，才能正确定位。
程序为了尽量通用，降低了效率（用了4个expression），所以最好还是根据实际情况自己来调整。
ps：需要像定位提示效果那样预设定位的话，可以自行扩展。

【锁定键盘】

使用覆盖层时，为了防止用户通过键盘操作页面，可以在document的keydown中执行preventDefault来禁用。
如果弹出层需要正常操作，只要在弹出层的keydown中执行stopPropagation就行了。

【拖动弹窗】

这里只是简单的加上拖动功能，要注意的是fixed定位时，计算拖动的参考对象是不同的。
更详细的拖动介绍可以看看这个拖动效果。

使用说明

实例化时，必须有弹出层作为参数：

new AlertBox("idBox");

선택적 매개변수는 다음을 포함하여 프로그램의 기본 속성을 설정하는 데 사용됩니다.
속성: 기본값//설명
fixed: false,//위치 고정 여부
zIndex: 1000,// 캐스케이드 수
onShow: $$.emptyFunction,//표시 시 실행
onClose: $$.emptyFunction//닫을 때 실행

다음 메소드도 제공됩니다.
show: 팝업 레이어 표시
close: 팝업 레이어 숨기기
dispose: 프로그램 삭제.

ie6과 호환되는 확장 기능을 추가하면 ie6의 수정된 문제가 자동으로 수정됩니다. fixSelect 속성에 따라 선택 마스크 버그 수정 여부를 설정할 수 있습니다.
센터링 확장을 추가한 후 센터 속성에 따라 센터링 여부를 설정할 수 있습니다. 기본값은 no입니다.

RepairFixed는 고정된 개체를 수정하며 독립적으로 사용할 수 있습니다. 수정이 필요한 요소를 추가하고 제거하는 추가 및 제거 메서드가 있습니다. IE6에서만 사용할 수 있습니다.
OverLay 오버레이 개체에는 다음 속성이 있습니다.
속성: 기본값//설명
"color": "#fff",//배경 색상
"opacity": .5,// 투명도 (0-1)
"zIndex": 100, // 오버레이 값
오버레이를 표시하고 숨기는 표시 및 닫기 메소드도 있습니다.

패키지 다운로드 주소