Jquery實作自訂彈跳窗範例_jquery-js教程-PHP中文網

在專案開發中，如果我們使用javascript自帶的提示對話框，感覺不怎麼美觀，所以我們通常都是自己定義一些對話框，這裡我實現點擊按鈕就彈跳一個登錄的窗口，點擊該窗口並可以實現拖曳功能，太多文字的東西說不清楚，直接用代碼說話。

這裡我將HTML、CSS、Jquery代碼分別貼出來

HTML部分：

複製代碼 代碼如下: 彈窗 登入騰虎通行證 > × 請輸入使用者名稱

請輸入密碼

下次自動登入 忘記密碼？ 立即註冊

可以用一下方式登入

QQ MSN CSS部分程式碼： 複製程式碼 複製程式碼複製程式碼複製程式碼複製程式碼複製程式碼 程式碼 *{margin:0px;padding:0px;color:#555555;} .alter{寬度:50px;height:30px;margin🎜>.alter{寬度:50px;height:30px;margin🎜>.alter{寬度:50px;height:30px;margin :10px} .box{ 寬度:100% ; 高度：100%； 位置：固定； 頂部：0; 左：0； 背景：-moz-線性漸變(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-index:100000; 顯示：無； } .box_content{ 高度：420px; 寬度：350px；背景：白色； 位置：固定； 頂部：0; 左：0; } .box_content .title{ 高度：45px; 寬度：1000 %; 背景：#EEEEEE； 行高：45px; 溢出：隱藏； } .title:hover{遊標：移動;} .title h3{floatatat :left;margin-left:20px;} .title h2{float:right;margin-right: 15px;顏色:#999999} .title h2:hover{顏色:#4444444444442;

.box_content .content,.other{邊距:20px 20px 10px 20px;溢出:隱藏; font:normal 14px "宋體";} .content table} {寬度:99%; >.content .inputstyle,.prompt{height:35px;width:96.5%;padding-left:10px;} .content .inputstyle{font:bold 18px/35px "宋體";} .content a { text-decoration: none; 顏色:#1B66C7 } .content a:hover{文字裝飾:下劃線;} .content table .login{ 高度: 45px;寬度:101%; 邊框：無； 背景：#4490F7; 顏色：#FFFFFF; font:bold 17px "宋體"; 邊框半徑：4px； 🎜>} .內容表.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； 寬度：30px; 右邊距：15px；邊框半徑：20px; 背景：#1B66C7; 顏色：白色； 文字對齊：居中； 行高：30px }

Jquery程式碼：

複製程式碼 程式碼如下： $(document).ready(function(){ BoxInit.init(); }); 🎜>var BoxInit={ wWidth:unknown,//ブラウザの幅 wHeight:unknown,//ブラウザの高さ show:unknown,//ボタンを表示 box:unknown,// Pop-アップ ウィンドウを覆う property boxContent:unknown,//ポップアップ ウィンドウ property closeBox:unknown,//閉じるボタン property loginBtn:unknown,//ログイン ボタン property 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; 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) }); }); }, /** *ログインボタン */ 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 offsetX=0;//ポップアップ ウィンドウの幅をブラウザの左側に移動します var offsetY=0;//ポップアップ ウィンドウの幅をブラウザの左側に移動しますブラウザの上部 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 属性を false に設定します move=false; }); $(document).mousemove(function(){ if(!move){//move 属性が true でない場合、次のコードは実行されません return; } //move が 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({"左":x,"上":y,"カーソル":"移動"}) } }); 🎜> /** *制御プロンプト情報 */ controlPromptInfo:function(){ //プロンプト情報を調べて、 $("p[class*=prompt]").each(function( ){ var pro=$(this); pro.click(function(){ //クリックプロンプト情報自体が非表示になり、テキストボックスがフォーカスされます pro.hide() .siblings("input ").focus(); }) // テキスト ボックスを移動します $("input[class*=ins]"); (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(); } }); } }

のコード機能全体はここにあります

請輸入使用者名稱
請輸入密碼
下次自動登入	忘記密碼？

立即註冊