Jquery实现自定义弹窗示例_jquery-js教程-PHP中文网

在项目开发中，如果我们使用javascript自带的提示对话框，感觉不怎么美观，所以我们通常都是自己定义一些对话框，这里我实现点击按钮就弹窗一个登录的窗口，点击该窗口并可以实现拖拽功能，太多文字的东西说不清楚，直接用代码说话。

这里我将HTML、CSS、Jquery代码分别贴出来

HTML部分：

复制代码 代码如下: 弹窗 登录腾虎通行证 × 请输入用户名

请输入密码

下次自动登录 忘记密码？ 立即注册

可以使用一下方式登录

QQ MSN 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 } Jquery代码： 复制代码 代码如下: $(document).ready(function(){ BoxInit.init(); });

}); }, /** *拖拽弹窗 */ 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 (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(); } }); }); } } 整个功能的代码都在这里了

请输入用户名
请输入密码
下次自动登录	忘记密码？

立即注册