jquery如何實現登錄成功界面

這篇文章主要為大家展示了“jquery如何實現登錄成功界面”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“jquery如何實現登錄成功界面”這篇文章吧。

　　1、預覽

　　1）登錄前

　　2）點擊登錄顯示登錄窗口（層），同時用一個灰色透明層遮罩主窗體內容，點擊【登錄】，隱藏【登錄】，顯示loading圖，登錄失敗，顯示【登錄】，隱藏登錄圖，同時顯示提示信息

　　3）登錄成功后，去掉去掉遮罩層和登錄層，顯示“xxx，您好！ ”

　　2、實現

　　使用VS2010創建一個Web Site，此功能是在母版頁Site.master中實現的。VS2010會自動添加JQuery的js文件到Scripts文件夾，并創建一個母版頁和基于此母版頁的Default.aspx和About.aspx兩個窗體。

　　1）登錄層界面設計，看Site.master中的代碼

　　FlyNoteBook

　　2）實現遮罩層和彈出登錄界面的層的js文件Scripts/common.js的代碼，注意，里面硬寫了一些母版頁Site.master中的元素的ID

　　$（function （） {

　　var screenwidth, screenheight, mytop, getPosLeft, getPosTop

　　screenwidth=$（window）。width（）;

　　screenheight=$（window）。height（）;

　　//獲取滾動條距頂部的偏移

　　mytop=$（document）。scrollTop（）;

　　//計算彈出層的left

　　getPosLeft=screenwidth / 2 - 200;

　　//計算彈出層的top

　　getPosTop=screenheight / 2 - 150;

　　//css定位彈出層

　　$（"#divLoginWindow"）。css（{ "left": getPosLeft, "top": getPosTop }）;

　　//當瀏覽器窗口大小改變時

　　$（window）。resize（function （） {

　　screenwidth=$（window）。width（）;

　　screenheight=$（window）。height（）;

　　mytop=$（document）。scrollTop（）;

　　getPosLeft=screenwidth / 2 - 200;

　　getPosTop=screenheight / 2 - 150;

　　$（"#divLoginWindow"）。css（{ "left": getPosLeft, "top": getPosTop + mytop }）;

　　}）;

以上是“jquery如何實現登錄成功界面”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！