Jquery implements custom pop-up window example

In project development, if we use the prompt dialog box that comes with javascript, it does not feel very beautiful, so we usually define some dialog boxes ourselves. Here I implement a login window that pops up when I click the button. Click the window and you can To implement the drag-and-drop function, there are too many words to explain clearly, so just use code to speak.

Here I post the HTML, CSS, and Jquery codes separately

HTML part:

Copy code The code is as follows: Pop-up Log in to Tencent Tiger Pass × &lt ;p class="prompt" id="username_p">Please enter username

Please enter password

Next Automatic login Forgot your password? Register now

You can use the following method to log in

QQ MSN CSS part code: Copy code The code is as follows: *{margin:0px;padding:0px;color:#555555;} .alter{width:50px;height:30px;margin:10px} .box{ width:100%; height:100%; position:fixed; top:0; left:0; background: -moz-linear-gradient(rgba(11,11,11,0.5), rgba(11,11,11,0.1)) repeat-x rgba(11,11,11,0.1); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.1))) repeat-x rgba(11,11,11,0.1); z-index:100000; display:none; } .box_content{ height:420px; width:350px; background:white; position:fixed; top:0; left:0; } .box_content .title{ height:45px; width:100%; background:#EEEEEE; line-height:45px; overflow:hidden; } .title:hover{cursor: move;} .title h3{float:left;margin-left:20px;} .title h2{float:right;margin-right:15px;color:#999999} .title h2:hover{color:#444444;cursor:pointer}

.box_content .content,.other{margin:20px 20px 10px 20px;overflow:hidden;font:normal 14px "宋体";} .content table{width:99%;} .content .inputstyle,.prompt{height:35px;width:96.5%;padding-left:10px;} .content .inputstyle{font:bold 18px/35px "宋体";} .content a{ text-decoration: none; color:#1B66C7 } .content a:hover{text-decoration: underline;} .content table .login{ height:45px;width:101%; border:none; background:#4490F7; color:#FFFFFF; font:bold 17px "宋体"; border-radius:4px; } .content table .login:hover{ background:#559BFC; } .content .prompt{ color:#999999; position:absolute; line-height:38px; }

.box_content .other{font:normal 14px "宋体";} .other ul{ list-style:none; margin-top:15px; } .other ul li{ float:left; height:30px; width:30px; margin-right:15px; border-radius:20px; background:#1B66C7; color:white; text-align:center; line-height: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(); }); } } 전체 기능은 여기에 있습니다