Jquery实现自定义弹窗
在项目开发中,如果我们使用javascript自带的提示对话框,感觉不怎么美观,所以我们通常都是自己定义一些对话框,这里我实现点击按钮就弹窗一个登录的窗口,点击该窗口并可以实现拖拽功能,太多文字的东西说不清楚,直接用代码说话。
这里我将HTML、CSS、Jquery代码分别贴出来
HTML部分:
<button id="show" class="alter">弹窗</button> <!-- 弹窗部分--> <div class="box"> <div class="box_content"> <div class="title"> <h3>登录腾虎通行证</h3> <h2 id="close">×</h2> </div> <div class="content"> <table border="0" cellpadding="0" cellspacing="0"> <tr height="60px"> <td colspan="2"> <p class="prompt" id="username_p">请输入用户名</p> <input type="text" class="inputstyle ins" id="username"/> </td> </tr> <tr height="60px"> <td colspan="2"> <p class="prompt" id="pwd_p">请输入密码</p> <input type="password" class="inputstyle ins" id="pwd"/> </td> </tr> <tr height="30px"> <td align="left"><input type="checkbox" checked="checked"/> 下次自动登录</td> <td align="right"><a href="#">忘记密码?</a></td> </tr> <tr height="60px"> <td colspan="2"><input type="submit" value="登录" class="inputstyle login" id="login"/></td> </tr> <tr height="30px"> <td colspan="2" align="right"><a href="#">立即注册</a></td> </tr> </table> </div> <p style="width:100%;border-bottom:1px solid #EEEEEE"></p> <div class="other"> <p>可以使用一下方式登录</p> <ul> <li>QQ</li> <li>MSN</li> <li></li> </ul> </div> </div> </div>
CSS部分代码:
<style type="text/css"> *{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 } </style>
Jquery代码:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ BoxInit.init(); }); var BoxInit={ wWidth:undefined,//浏览器宽度 wHeight:undefined,//浏览器高度 show:undefined,//显示按钮 box:undefined,//弹窗遮盖属性 boxContent:undefined,//弹窗属性 closeBox:undefined,//关闭按钮属性 loginBtn:undefined,//登录按钮属性 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拖拽 self.dragDrop(); //调用控制提示信息 self.controlPromptInfo(); }, /** *显示按钮 */ showBtn:function(){ var self=this; self.box.animate({"width":self.wWidth,"height":self.wHeight},function(){ //设置弹窗的位置 self.boxContent.animate({ "left":(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;//弹窗到浏览器left的宽度 var offsetY=0;//弹出到浏览器top的宽度 var title=$(".title"); //鼠标按下事件 title.mousedown(function(){ move=true;//当鼠标按在该div上的时间将move属性设置为true offsetX=event.offsetX;//获取鼠标在当前窗口的相对偏移位置的Left值并赋值给offsetX offsetY=event.offsetY;//获取鼠标在当前窗口的相对偏移位置的Top值并赋值给offsetY title.css({"cursor":"move"}); }).mouseup(function(){ //当鼠标松开的时候将move属性摄hi为false move=false; }); $(document).mousemove(function(){ if(!move){//如果move属性不为true,就不执行下面的代码 return; } //move为true的时候执行下面代码 var x = event.clientX-offsetX; //event.clientX得到鼠标相对于客户端正文区域的偏移,然后减去offsetX即得到当前推拽元素相对于当前窗口的X值(减去鼠标刚开始拖动的时候在当前窗口的偏移X) var y = event.clientY-offsetY; //event.clientY得到鼠标相对于客户端正文区域的偏移,然后减去offsetX即得到当前推拽元素相对于当前窗口的Y值(减去鼠标刚开始拖动的时候在当前窗口的偏移Y) if(!(x<0||y<0||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(); } }); }); } } </script>整个功能的代码都在这里了
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。