使用javascript自帶的提示對話框，不怎麼美觀，如果使用自定義的，那麼在樣式上就會有更多的控制權了，下面為大家分享下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> 整個功能的代碼都在這裡了