DIV 팝업을 사용하여 컨텐츠를 동적으로 표시하는 원리 : 먼저 CSS 및 HTML을 사용하여 팝업의 컨텐츠를 숨긴 다음 JavaScript (jQuery)를 사용하여 동적으로 표시하십시오. 이 효과는 제한된 레이아웃 공간을 최대한 활용할뿐만 아니라 사용자 경험을 향상시킵니다. 더 중요한 것은 SEO 효과에 영향을 미치지 않는다는 것입니다 (실제로 페이지에 존재하지만 처음에는 보이지 않기 때문에)
1. HTML 페이지에서 DIV를 정의하고 DIV에 표시해야 할 내용을 구현하십시오.
코드 사본은 다음과 같습니다.
<body>
<div id = "로그인">
<H2> <IMG SRC = "Images/Close.png"/> 웹 사이트 로그인 </h2>
<form id = "loginform">
<div> </div>
<div> 계정 : <input type = "text"name = "user" /> < /div>
<div> 비밀번호 : <입력 유형 = "비밀번호"이름 = "pass" /> < /div>
<div> <입력 유형 = "버튼"이름 = "sub"value = "" /> < /div>
</form>
<div> 새로운 사용자 등록 | 비밀번호를 잊으 셨나요? </div>
</div>
</body>
한 사진은 천 단어의 가치가 있습니다. 이 div 팝업 창의 효과의 스크린 샷을 살펴 보겠습니다.
2. 내가 사용하는 CSS 스타일
코드 사본은 다음과 같습니다.
#Login {
너비 : 350px;
높이 : 250px;
국경 : 1px Solid #CCC;
위치 : 절대;
디스플레이 : 블록;
Z- 인덱스 : 9999;
배경 : #fff;
}
#Login H2 {
높이 : 40px;
라인 높이 : 40px;
텍스트 정렬 : 센터;
글꼴 크기 : 14px;
글자 스페이스 : 1px;
색상 :#666;
배경 : URL (images/login_header.png) 반복 -X;
여백 : 0;
패딩 : 0;
국경-바닥 : 1px solid #ccc;
커서 : 이동;
}
#login h2 img {
플로트 : 오른쪽;
위치 : 상대;
상단 : 14px;
오른쪽 : 8px;
커서 : 포인터;
}
#login div.info {
패딩 : 10px 0 5px 0;
텍스트 정렬 : 센터;
색상 : 적갈색;
}
#login div.user, #login div.pass {
글꼴 크기 : 14px;
색상 :#666;
패딩 : 5px 0;
텍스트 정렬 : 센터;
}
#login input.text {
너비 : 200px;
높이 : 25px;
국경 : 1px Solid #CCC;
배경 : #fff;
글꼴 크기 : 14px;
}
#Login .Button {
텍스트 정렬 : 센터;
패딩 : 15px 0;
}
#login input.submit {
너비 : 107px;
높이 : 30px;
배경 : URL (images/login_button.png) 없음 리피;
국경 : 없음;
커서 : 포인터;
}
#login .other {
텍스트 정렬 : 맞습니다.
패딩 : 15px 10px;
색상 :#666;
}
여기에 주목해야 할 것은 DIV 스타일의 정의입니다. 우리는 중앙 디스플레이를 가고 있어야하기 때문에 절대 포지셔닝 위치를 사용합니다. 절대; 둘째, 팝업 레이어이기 때문에 DIV는 가장 바깥 쪽 주변에 있어야하므로 Z- 인덱스는 일반적으로 매우 크게 설정되어 있으며 여기서 z-index : 9999; 또 다른 요점은 div 자체가 숨겨져 있고 표시되도록 설정해야한다는 것입니다. 없음, 여기서는 효과를 직접 살펴 봐야하므로 디스플레이를 사용하여 직접 표시 할 수 있습니다. 블록;
3. 중앙에 표시해야하므로 먼저 브라우저의 높이와 너비를 가져와야합니다. 스크롤 막대의 수평 또는 수직 오프셋이있는 경우 계산을 통해 길이를 얻고 DIV의 위치를 브라우저로 가져와야합니다.
코드 사본은 다음과 같습니다.
$ (document). readip (function ()
{
jQuery.fn.extend ({{
중심 : 기능 (너비, 높이)
{
return $ (this) .css ( "왼쪽", ($ (창) .width () -width)/2+$ (창) .scrollleft ()).
css ( "상단", ($ (창) .height ()-높이)/2+$ (창) .scrolltop ()).
CSS ( "너비", 너비).
CSS ( "높이", 높이);
}
});
});
버튼을 클릭하여 표시하십시오
코드 사본은 다음과 같습니다.
$ ( ". 로그인"). 클릭 (function ()
{
$ ( "#login"). show (). 센터 (350,250); // 로그인 상자 표시
});
복제 다이어그램
4. 팝업 프레임을 드래그 앤 드롭 할 수 있습니다
코드 구현
코드 사본은 다음과 같습니다.
$ (document). readip (function ()
{
jQuery.fn.extend ({{
// 기능을 드롭 앤 드롭합니다
드래그 : function () {
var $ tar = $ (this);
return $ (this) .MousEdown (function (e) {
if (e.target.tagname == "h2") {
var diffx = e.clientx- $ tar.offset (). 왼쪽;
var diffy = e.clienty- $ tar.offset (). 상단;
$ (문서) .MousEmove (function (e) {
var 왼쪽 = E.clientx -diffx;
var top = e.clienty- diffy;
if (왼쪽 <0) {
왼쪽 = 0;
}
else if if (왼쪽 <= $ (창) .scrollleft ()) {
왼쪽 = $ (창) .scrollleft ();
}
else if (왼쪽> $ (창) .width () +$ (창) .scrollleft () - $ tar.width ()) {
왼쪽 = $ (창) .width () +$ (창) .scrollleft () -$ tar.width ();
}
if (top <0) {
상단 = 0;
}
else if (top <= $ (창) .scrolltop ()) {
top = $ (창) .scrolltop ();
}
else if (top> $ (창) .height () +$ (창) .scrolltop () - $ tar.height ()) {
top = $ (창) .height () +$ (창) .scrolltop () - $ tar.height ();
}
$ tar.css ( "왼쪽", 왼쪽 + 'PX'). CSS ( "상단", 상단 + 'PX');
});
}
$ (document) .mouseup (function () {
$ (this) .unbind ( "mousemove");
$ (this) .unbind ( "마우스 업")
});
});
}
});
});
여기서는 DIV 컨텐츠에서 H2 요소 만 클릭하고 드래그합니다. 글로벌 DIV가 필요한 경우 수정할 수 있습니다. 드래그 원리 : 마우스가 지정된 요소를 누르면 마우스 지점의 좌표를 가져오고 계산을 통해 그림도 해당 위치로 이동합니다. 마우스가 취소되면 해당 프레스 이벤트가 취소되고 페이지가 여전히 있습니다.
드래그 방법을 호출하십시오
코드 사본은 다음과 같습니다.
$ ( "#login"). drag ();
이제 팝업 박스의 제목 표시 줄을 클릭하여 브라우저에서 드래그 할 수 있습니다.