jquery如何實現(xiàn)登錄成功界面

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

　　1、預(yù)覽

　　1）登錄前

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

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

　　2、實現(xiàn)

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

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

　　FlyNoteBook

　　2）實現(xiàn)遮罩層和彈出登錄界面的層的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 }）;

　　//當(dāng)瀏覽器窗口大小改變時

　　$（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如何實現(xiàn)登錄成功界面”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！