1. 하위 형태
웹 사이트를 디자인 할 때는 다음과 같은 일부 모달 하위 형태를 설계해야합니다.
이 단계는 구현하기 쉽습니다. Div+CSS 만 괜찮습니다. 코드를 참조하십시오.
코드 사본은 다음과 같습니다.
<div> </div>
<div>
<div>
<centre> 블록 영역을 클릭하면 내 위치가 변경 될 수 있습니다
</div>
</div>
코드 사본은 다음과 같습니다.
. 모달 백
{
배경색 : #999999;
하단 : 0;
왼쪽 : 0;
불투명도 : 0.3;
위치 : 고정;
오른쪽 : 0;
상단 : 0;
Z- 인덱스 : 1100;
}
. 모달 창
{
배경색 : #fffff;
테두리 : 1px Solid #6B94AD;
Box-Shadow : 5PX 5PX 5PX #6B94AD;
Font-Family : 'Microsoft Yahei';
글꼴 크기 : 12px;
높이 : 120px;
왼쪽 : 50%;
마진 왼쪽 : -160px;
마진 -탑 : -160px;
불투명도 : 1;
위치 : 고정;
상단 : 50%;
너비 : 320px;
Z- 인덱스 : 1110;
}
.Modal-Window .head
{
높이 : 25px;
색상 : #ffff;
글꼴 중량 : 600;
백그라운드 이미지 : -Moz-linear-gradient (Top, #4a8cc5, #2963a5);
배경 이미지 : -webkit-gradient (선형, 왼쪽 상단, 왼쪽 하단, 컬러 스톱 (0, #4a8cc5), 컬러 스톱 (1, #2963a5));
필터 : progid : dximagetransform.microsoft.gradient (startColorstr = '#4a8cc5', endcolorstr = '#2963a5', gradientType = '0'); : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
}
.Modal-Window .head 센터
{
패딩 탑 : 2px;
}
위의 HTML 및 CSS를 추가하면 상기 모달 형태의 효과를 쉽게 달성 할 수 있습니다. 왼쪽 : 50%; -160px;
물론, 모달 형식의 크기는 스타일 클래스로 작성됩니다.
코드 사본은 다음과 같습니다.
<div> </div>
<div>
<div>
<centre> 블록 영역을 클릭하면 내 위치가 변경 될 수 있습니다
</div>
</div>
두 번째 코드 줄은 .List-Window 스타일 클래스에 추가되어 .Modal-Window 클래스의 크기와 위치를 무시하지만 모달 양식이 중심 및 표시되도록합니다.
코드 사본은 다음과 같습니다.
.list-window
{
너비 : 600px;
높이 : 400px;
마진 왼쪽 : -300px;
마진-탑 : -200px;
}
그림처럼
이 단계의 구현은 여러 키 라인의 CSS 속성을 마스터하면 다른 모달 하위 형태를 "완전히 남용"할 수 있습니다.
2. 마우스가 하위 형태의 헤드를 클릭하면 하위 형태를 끌고 이동하는 방법? JQ를 소개 한 후이 작은 기능을 해결하려면 몇 가지 스크립트 만 있으면됩니다. 당신이 그것을 믿지 않는다면, 보자
코드 사본은 다음과 같습니다.
var 왼쪽, 상단, $ this;
$ (Document) .Delegate ( '. Modal-Window .head', 'Mousedown', function (e) {
left = e.clientx, top = e.clienty, $ this = $ (this) .css ( 'cursor', 'move');
this.setcapture?
this.setCapture (),
this.onmouseMove = function (ev) {mouseMove (ev || event);
this.onmouseup = 마우스 업
) : $ (document) .bind ( "mouseMove", mouseMove) .Bind ( "마우스 업", 마우스 업);
});
함수 mouseMove (e) {
var target = $ this.parents ( '. Modal-Window');
var l = math.max ((e.clientx- 왼쪽 + 번호 (target.css ( 'margin -left'). 교체 (/px $/, '') || 0), -target.position (). 왼쪽);
var t = math.max ((e.clienty -top + number (target.css ( 'margin -top')). 교체 (/px $/, '' ') || 0), -target.position (). 맨 위);
l = math.min (l, $ (Wind
t = math.min (t, $ (창) .height () - target.height () - target.position (). 상단);
왼쪽 = e.clientx;
top = e.clienty;
target.css ({ 'margin-left': l, 'margin-top': t});
}
함수 마우스 업 (e) {
var el = $ this.css ( 'cursor', 'default'). get (0);
el. Releasecapture?
(
el.releasecapture (),
el.onmouseMove = el.onmouseup = null
) : $ (document) .unbind ( "mouseMove", mouseMove) .unbind ( "MouseUp", MouseUp);
}
이 코드는 매우 짧으며 다양한 브라우저에서 원활하게 실행할 수 있습니다.
실제로, 구현 원칙은 매우 간단하고 대략 세 단계로 나뉩니다.
mouse 마우스가 모달 형태의 헤드에있는 마우스 타운 아래에있을 때, 즉시 mousemove 및 마우스 업 이벤트를 문서에 바인딩하십시오.
mouse 마우스가 팝업되지 않으면 (마우스 업 없음) 마우스가 형태로 움직이면 마우스 기능을 활성화하고 마우스가 이동하는 거리를 계산하여 전체 형태의 위치를 시간에 이동합니다.
mouse 마우스가 튀어 오르면 (마우스 업) 마우스 업 이벤트에 전화하여 문서에 묶인 MouseMove 이벤트 및 마우스 업 이벤트를 풀어주십시오.
전체 프로세스의 원리는 : 마우스 마우스 다우드가 다운되면 마우스 움직임 이벤트가 문서로 전송되고 전체 양식이 문서의 마우스 이동 이벤트를 통해 처리됩니다.
또한 MouseMove에는 작은 트릭이 있습니다. 이는 전 세계 왼쪽이 마지막 마우스 정지의 위치를 기록한 다음 다음 번에 이동할 때 마우스의 위치를 왼쪽 및 상단 변수와 비교합니다. 마우스가 얼마나 멀리 이동했는지.
이 코드를 분석 한 후 마우스가 문서의 양식 또는 요소를 이동하는 것이 매우 쉽습니다.
예를 들어, 드래그 및 떨어 뜨려 양식의 크기를 변경하려면 MouseMove 이벤트 처리 기능에서 양식의 크기를 조정하면됩니다. 다시 개선 되었습니까? 작은 단계는 어떻습니까?
어떤 사람들은 각각 어떤 정적 및 방출을하는지 물어볼 수 있습니까? 실제로 이것은 IE만이 여기에서 멸시됩니다. SetCapture는 현재 요소가 마우스의 모든 이벤트를 사용하지 않으면 IE 브라우저와 호환되지 않을 수 있습니다.