학습을 위해 위의 JavaScript 간단한 팝업 드래그 윈도우 (i) 구현을 계속하십시오.
다음은 코드의 특정 분석입니다.
먼저 구조를 확인해 봅시다.
부동 창 : 처음에는 보이지 않습니다. 제목 표시 줄과 컨텐츠 바가 포함되어 있으며 제목 표시 줄과 제목 표시 줄 안에 닫기 버튼이 포함되어 있습니다.
마스크 레이어 : 처음에는 보이지 않습니다. 떠 다니는 창이 나타날 때 반투명 배경을 설정하는 데 사용됩니다.
버튼 : 플로팅 창을 팝업하기 위해 클릭하는 데 사용됩니다.
다음은 자세히 설명합니다
1. 창이 자유롭게 움직 이도록하려면 창의 위치가 절대적이어야합니다.
/*로그인 플로팅 레이어 구성 요소*/. 팝업 {디스플레이 : 없음; /*초기 숨기는*/ 너비 : 380px; 높이 : 자동; /*높은 자유는 확실하지 않기 때문에 콘텐츠의 양입니다. */ 테두리 : 1px 고체 #d5d5d5; 배경 : #ffff; /*창 함량은 불투명하고 배경은 흰색입니다*/ box-shadow : 0 0 3px rgba (0, 0, 0, 0.25); -Moz-Box-Shadow : 0 3PX RGBA (0, 0, 0, 0.25); -webkit-box-shadow : 0 3px rgba (0, 0, 0, 0.25); /*컨텐츠 창이 그림자로 표시되어*/ Border-Radius : 8px; /* 모든 모서리는 반경이 8px 인 둥근 모서리를 사용하며,이 특성은 CSS3 표준 속성입니다*/ -moz-border-radius : 8px; /* Mozilla 브라우저의 개인 속성*/ -webkit-border-radius : 8px; /* WebKit 브라우저의 개인 속성*//* 창 둥근 모서리*/ 위치 : 절대; 상단 : 100px; 왼쪽 : 100px; /*절대 포지셔닝*/ z-index : 9000; }2. 제목 표시 줄을 창에 추가하고 제목 표시 줄의 마우스 커서를 드래그 (Move) 모양으로 설정합니다 (Chrome에서 드래그 할 때 커서는 텍스트 커서가되며 마우스 버튼을 출시 한 후 복원됩니다). 여기에서는 타이틀 바의 왼쪽 상단 및 오른쪽 상단 모서리의 둥근 모서리를 설정해야합니다.
/*타이틀 바 영역*/. popup_title {높이 : 48px; 라인 높이 : 48px; /*센터 수직으로*/ 패딩 : 0px 20px; /*왼쪽에서 일정 거리를 만듭니다*/ 배경 : #f5f5f5; /*배경색*/ Border-Bottom : 1px solid #efefefef; /*하단 테두리*/ Border-Radius : 8px 8px 0 0; /* 왼쪽 상단과 오른쪽 상단에 반경이 5px 인 둥근 모서리를 사용하십시오. 이 속성은 CSS3 표준 속성*/ -moz-border-radius : 8px 8px 0 0; /* Mozilla 브라우저의 사유지*/ -webkit-border-radius : 8px 8px 0 0; /* WebKit 브라우저의 개인 속성*//* 창 둥근 모서리*/ 색상 : #535353; 글꼴 크기 : 16px; /* 글꼴 색상 및 글꼴 크기*/ 커서 : 이동; /* 이동식 스타일*/-Moz-User-Select : 없음; / * firefox all */ -webkit-user select : none; /* chrome all / safari all / opera15+* / -ms-user select : 없음; /* IE10*/ -khtml-user-select : none; /* 초기 브라우저*/ 사용자 선택 : 없음; -o-user 선택 : 없음; /* 위의 두 속성은 현재 지원되지 않으므로 위험을 줄이기 위해 여기에 썼습니다*/}다음은 이해해야 할 몇 가지 지식 사항입니다.
1. CSS3 (Border-Radius) 테두리 둥근 모서리
Border-Radius는 약어 방법입니다. 또한 네 값은 상단 왼쪽, 상단 오른쪽, 바닥 오른쪽, 하단 왼쪽 및 왼쪽의 순서대로 설정됩니다. 주요 상황은 다음 상황에서 발생합니다.
1. 값이 하나만 있으면 왼쪽 상단, 오른쪽, 오른쪽 하단 및 왼쪽의 4 가지 값이 동일합니다.
2. 두 값이 있고, 왼쪽 상단은 바닥 오른쪽과 같고 첫 번째 값은 사용됩니다. 오른쪽 상단은 왼쪽 하단과 같으며 두 번째 값은 사용됩니다.
3. 세 가지 값이 있으며, 첫 번째 값은 왼쪽 상단을 설정하는 것입니다. 두 번째 값은 상단 오른쪽이고 왼쪽 하단이며, 세 번째 값은 동일하며 바닥 오른쪽을 설정하는 것입니다.
4. 네 가지 값이 있고, 첫 번째 값은 상단 왼쪽을 설정하는 것이고, 두 번째 값은 상단 순간, 세 번째 값은 바닥 오른쪽이며, 네 번째 값은 왼쪽 하단을 설정하는 것입니다.
지원되는 브라우저 :
2. 커서 : 움직입니다
커서 속성은 표시된 포인터 유형 (커서)을 지정합니다.
속성 값이 움직일 때이 커서가 언급 한 객체는 그림과 같이 보통 크로스 화살표가 움직일 수 있음을 의미합니다.
3. 사용자 선택 : 내용의 선택성을 제어하는 데 사용됩니다
자동 감소 값, 사용자는 요소의 내용을 선택할 수 있습니다.
없음 - 사용자는 요소에서 컨텐츠를 선택할 수 없습니다.
텍스트-사용자는 요소에서 텍스트를 선택할 수 있습니다
요소 - 텍스트는 선택 사항이지만 요소의 경계 내에서만 (IE 및 FF에서만 지원됩니다)
사용자-선택은 W3C CSS 표준 속성이 아니며 브라우저는 불완전하게 지원하며 각 브라우저에 대해 조정해야합니다.
사용자 선택 설명 :
사용자가 텍스트를 선택할 수 있는지 여부를 설정하거나 검색합니다.
(1) IE6-9는이 속성을 지원하지 않지만 태그 속성 OnSelectStart = "Return False;"의 사용을 지원합니다. 사용자 선택의 효과를 달성하기 위해 : 없음; Safari와 Chrome 도이 태그 속성을 지원합니다.
(2)이 속성은 Opera12.5까지는 지원되지 않지만 IE6-9와 마찬가지로 사용자 선택의 효과를 달성하기 위해 개인 태그 속성을 선택할 수없는 개인 태그 속성의 사용을 지원합니다.
(3) 선택 불가능한 또 다른 값은 꺼져있다. 다른 브라우저에서 텍스트가 -ms-user-select로 설정된 경우 : 없음; 다른 브라우저에서는 사용자가 텍스트 블록에서 텍스트를 선택할 수 없습니다.
그러나 사용자가 페이지의 다른 영역에서 텍스트를 선택하기 시작하면 사용자는 텍스트를 -ms-user-select : none;으로 설정하는 영역 텍스트를 계속 선택할 수 있습니다.
다음 코드를 분석합니다 (참고 :이 코드 와이 코드의 분석 결과는 W3HELP에서 나온 것입니다) :
<! docType html> <html> <body> <div unselectible = "on"style = "background : #cc;" > unselectable = on </div> <br/> <div style = "배경 : #cc; -webkit-user-select : none;" > -webkit-user-select : none; </div> <br/> <div style = "배경 : #cc; -moz-user-select : none;" > -Moz-User-Select : none; </div> <br/> <div style = "background : #cc;" onselectStart = "return false;" > OnSelectStart = "return false;"</div> </body> </html>
각 브라우저의 효과는 다음과 같습니다.
참고 1 : 내용을 비활성화 할 수 있습니다.
참고 2 : 컨텐츠를 선택할 수 없습니다.
컨텐츠 선택을 금지하는 방법은 다음과 같습니다.
IE는 태그에 대해 선택할 수없는 = "on"을 설정하고 태그 메소드 onselectStart = "return false;"를 설정합니다.
Firefox는 태그에 대한 개인 스타일을 설정합니다 -Moz-User-Select : None.
Chrome Safari는 태그 -webkit-user-select에 대한 개인 스타일을 설정하고 none을 설정하고 태그 메소드 onselectstart = "return false;"를 설정합니다.
오페라는 태그에 대해 선택할 수없는 = "on"을 설정합니다
해결책
레이블에 대한 스타일 설정 -Moz-User-Select : None; -webKit-User-Select : None은 동시에 선택할 수없는 설정을 설정하여 모든 브라우저가 컨텐츠 선택을 금지 할 수 있도록 설정하십시오.
금지 된 선택 스타일을 케이스에서 플로팅 차이 팝업 창의 제목 표시 줄로 설정하면 다음과 같이 설정할 수 있습니다.
<div id = "popup_title"unselectable = "on"> 로그인 <a href = "javaScript : hidePopup ();"> </a> </div>
.popup_title {-moz-user-select : none; / * firefox all */ -webkit-user select : none; /* chrome all / safari all / opera15+* / -ms-user select : 없음; /*IE10*/ -khtml-user-select : none; /* 초기 브라우저*/ 사용자 선택 : 없음; -o-user 선택 : 없음; /*위의 두 속성은 현재 지원되지 않으며 위험을 줄이기 위해 여기에 작성되었습니다*/}참고 :이 기사는 http://www.cnblogs.com/wanghuih/p/5576910.html의 원래 주소입니다
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.