Jquery는 사용자 정의 팝업 창 example_jquery를 구현합니다.-JS 튜토리얼-php.cn

프로젝트 개발 시 자바스크립트에서 제공하는 프롬프트 대화 상자를 사용하면 그다지 아름다운 느낌이 들지 않기 때문에 일반적으로 몇 가지 대화 상자를 직접 정의하는데, 여기에서는 창을 클릭할 때 나타나는 로그인 창을 구현합니다. 드래그 앤 드롭 기능을 구현하려면 단어가 너무 많아서 명확하게 설명하기 힘들기 때문에 그냥 코드를 사용해서 말하시면 됩니다.

여기서 HTML, CSS, Jquery 코드를 별도로 게시합니다.

HTML 부분:

코드 복사 코드는 다음과 같습니다. Pop-up h3>Tencent Tiger Pass에 로그인하세요 × ; &lt ;p class="prompt" id="username_p">사용자 이름을 입력하세요

; ; 다음 자동 로그인 비밀번호를 잊으셨나요? 지금 등록하기 테이블>

다음 방법을 사용하여 로그인하실 수 있습니다

QQ MSN&lt ;/ li> >

CSS 부품 코드:

코드 복사

코드는 다음과 같습니다. *{margin:0px;padding:0px;color:#555555;} .alter{width:50px;height:30px;margin:10px} .box{ 너비:100% ; 높이:100%; 위치:고정; 상단:0; 왼쪽:0; 배경: -moz-linear-gradient(rgba(11,11,11,0.5), rgba(11,11,11,0.1)) 반복-x rgba(11,11,11,0.1); 배경:-webkit-gradient(선형, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.1))) 반복-x rgba(11,11,11,0.1); z-색인:100000; 디스플레이:없음; } .box_content{ 높이:420px; 폭:350px; 배경:흰색; 위치:고정; 상단:0; 왼쪽:0; } .box_content .title{ 높이:45px; 폭:100%; 배경:#EEEEEE; 줄 높이:45px; 오버플로:숨김; } .title:hover{cursor: move;} .title h3{float:left;margin-left:20px;} .title h2{float:right;margin-right: 15px;색상:#999999} .title h2:hover{color:#444444;cursor:pointer}

.box_content .content,.other{margin:20px 20px 10px 20px;overflow:hidden; 글꼴:일반 14px "宋体";} .content 테이블{너비:99%;} .content .inputstyle,.prompt{height:35px;width:96.5%;padding-left:10px;} .content .inputstyle{font:bold 18px/35px "宋体";} .content a{ 텍스트 장식: 없음; 색상:#1B66C7 } .content a:hover{텍스트 장식: 밑줄;} .content 테이블 .login{ 높이:45px;너비:101%; 테두리:없음; 배경:#4490F7; 색상:#FFFFFF; 글꼴:bold 17px "宋体"; 테두리 반경:4px; } .content 테이블 .login:hover{ 배경:#559BFC; } .content .prompt{ 색상:#999999; 위치:절대; 줄 높이:38px; }

.box_content .other{font:normal 14px "宋体";} .other ul{ list-style:none; 여백 상단:15px; } .other ul li{ float:left; 높이:30px; 너비:30px; 여백-오른쪽:15px; 테두리 반경:20px; 배경:#1B66C7; 색상:흰색; 텍스트 정렬:가운데; 줄 높이:30px } Jquery代码: 复代码 代码如下: $(document).ready(function(){ BoxInit.init(); }); 🎜>var BoxInit={ wWidth:undefine,//브라우저 너비 wHeight:undefine,//브라우저 높이 show:undefine,//버튼 표시 box:undefine,// Pop- 창 덮기 속성 boxContent:undefine,//팝업 창 속성 closeBox:undefine,//닫기 버튼 속성 loginBtn:undefine,//로그인 버튼 속성 init:function() { var self=this;//컨트롤 개체 가져오기 self.show=$("#show") self.box=$(".box"); >self.boxContent=$(".box_content"); self.closeBox=$("#close") self.loginBtn=$("#login")//브라우저 가져오기 시각화 너비 및 높이 self.wWidth=$(window).width(); self.wHeight=$(window).height() //표시 버튼 클릭 이벤트 바인딩 self.show.click(function(){self.showBtn()}); //닫기 버튼 이벤트 바인딩 self.closeBox.click(function(){self.closes()}) //로그인 버튼 바인딩 self.loginBtn.click(function(){self.login()}) //DIV drag self.dragDrop() //Call 제어 프롬프트 정보 self.controlPromptInfo(); }, /** *표시 버튼 */ showBtn:function(){ var self=this self; box.animate({"width":self.wWidth,"height":self.wHeight},function(){ //팝업 창 위치 설정 self.boxContent.animate({ " 왼쪽":(self.wWidth-self.boxContent.width())/2 },function(){ $(this).animate({"top":(self.wHeight -self.boxContent .height())/2}); }); }), /** *닫기 버튼 */ closes:function() { var self=this self.boxContent.animate({ "top":0 },function(){ $(this).animate({"left" :-(self .wWidth-self.boxContent.width())/2},function(){ self.box.animate({"width":-self.wWidth,"height":-self.wHeight }); }); }, /** *로그인 버튼 */ login:function(){ var self=this; >self.boxContent .animate({ "top":0 },function(){ $(this).animate({"left":-(self.wWidth-self.boxContent. width()) /2},function(){ self.box.animate({"width":-self.wWidth,"height":-self.wHeight}) }); > }) }, /** *팝업창을 드래그하세요 */ dragDrop:function(){ var self=this var move=false;// 요소를 이동할지 여부를 식별합니다. var offsetX=0;//팝업 창의 너비를 브라우저 왼쪽으로 var offsetY=0;//팝업 창의 너비를 브라우저 왼쪽으로 브라우저 상단 var title=$(".title");//마우스 다운 이벤트 title.mousedown(function(){ move=true;//마우스가 div를 누르고 이동 속성을 true로 설정합니다 offsetX=event.offsetX;//현재 창에서 마우스의 상대 오프셋 위치의 Left 값을 가져와서 offsetX offsetY=event에 할당합니다. offsetY;//현재 창에서 마우스의 상대적 오프셋 위치의 Top 값을 가져와서 offsetY에 할당합니다. title.css({"cursor":"move"}) }).mouseup (function(){ //마우스를 놓으면 이동 속성을 false로 설정 move=false; }) $(document).mousemove(function(){ if(!move){//이동 속성이 true가 아닌 경우 다음 코드는 실행되지 않습니다. return } //이동이 true인 경우 다음 코드를 실행합니다. var x = event.clientX-offsetX; //event.clientX는 클라이언트 텍스트 영역을 기준으로 마우스의 오프셋을 가져온 다음 offsetX를 빼서 현재 창을 기준으로 현재 푸시된 요소의 X 값을 가져옵니다. offset clientY는 클라이언트 텍스트 영역을 기준으로 마우스의 오프셋을 가져온 다음 offsetX를 빼서 현재 창을 기준으로 현재 푸시된 요소의 Y 값을 가져옵니다(마우스가 처음 드래그를 시작할 때 현재 창의 오프셋 Y를 뺀 값). if(!(x (self.wWidth-self.boxContent.width())||y>(self.wHeight-self.boxContent.height())) ){ self.boxContent.css({"left":x,"top":y,"cursor":"move"}) } }), /** *제어 프롬프트 정보 */ controlPromptInfo:function(){ //프롬프트 정보를 탐색하고 $("p[class*=prompt]").each(function( ){ var pro=$(this); pro.click(function(){ //클릭 프롬프트 정보가 숨겨지고 텍스트 상자가 포커스됩니다 pro.hide() .siblings("input ").focus(); }); }) //텍스트 상자 탐색 $("input[class*=ins]").each (function(){ var input=$(this); //텍스트 상자가 포커스를 잃습니다 input.blur(function(){ //텍스트 상자 값이 비어 있는 경우 if(input.val( )==""){ //프롬프트 정보 표시 input.siblings(".prompt").show() } }). keyup(function(){// 버튼이 올라갔을 때 if(input.val()==""){//텍스트 상자 값이 비어 있는 경우 //텍스트 상자가 포커스를 잃고 다음을 표시합니다. 프롬프트 메시지 input.blur().siblings(".prompt").show(); }else{ //프롬프트 정보 숨기기 input.siblings(".prompt" ).hide(); }); } } 전체 기능은 여기에 있습니다