10/10/2018, 09:20
Đăng nhập với Ajax
Bạn nào biết hay có code về Ajax để đăng nhập vào website không? Cụ thể là User đang ở trang chủ khi nhấn link đăng nhập thì toàn bộ màn hình sẽ mờ đi và 1 form nhỏ sẽ xuất hiện. Giống như trang www.javascriptbank.com. Mình đã xem code nhưng không tìm thấy các file Js,css. Bạn nào biết về Ajax giúp mình nha. Cảm ơn rất nhiều.
Bài liên quan
gọi ID của nó là id="baoquanh" chẳng hạn thế
cái nèy phải cài thuộc tính CSS là filter dùng cho hiệu ứng làm mờ , hình như IE mới biết cái nèy thôi.
Khi bạn nhấn login , 1 DIV tag nữa sẽ được tạo ra dùng để giả dạng cái LoginBox tên là id='LoginBox' chẵng hạn thế. Cái Div Tag này có thưộc tính CSS là position:fixed , cài event của tag là onblur. Bên Trong Div tag nèy sẽ có các Nút nhấn và TextBox và sẽ được cài các Event click
Khi bạn nhấn Login. đầu tiên Javascript sẽ getlementbyid tên là baoquanh và set filter để cho nó giống như là mờ đi . và Tag LoginBox sẽ được insert vào trong nội dung của Document. Cái event Onblur dùng đễ bắt cái event khi bạn nhấn chuột ra ngoài cái login box thi lúc đó toàn bộ trang web sẽ bị trả về bình thường.
Đại khái là như thế.
Source: jsB@nk
<html> <head> <style type='text/css'> .Wrapper { background-color:#000000; filter:alpha(opacity:30); z-index=10; width:100%; height:100%; position:absolute; left:0; top:0; } .LoginTitle { font-weight:800; color:#696969; background-color:#F0F8FF; border-top:solid 1px #B0C4DE; border-bottom:solid 1px #FFCC33; } .LoginTable { width:300; background-color:#FFFFF0; position:absolute; border:solid 1px #778899; z-index=100; } .LoginDetail { padding-top:5px; padding-bottom:5px } </style> <script type='text/javascript'> function Click() { var Wr=document.getElementsByTagName('body')[0]; Wr.innerHTML+=("<div id='wrapper' class='Wrapper'></div>"); var MyLoginBox="<table cellpadding='0' cellspacing='0' id='Login' class='LoginTable'>"; MyLoginBox+="<tr><th colspan='2' class='LoginTitle'>User Login Box</th></tr>"; MyLoginBox+="<tr><th class='LoginDetail'>User Name</th><td class='LoginDetail'><input/></td></tr>"; MyLoginBox+="<tr><th class='LoginDetail'>Password</th><td class='LoginDetail'><input/></td></tr></table>"; Wr.innerHTML+=MyLoginBox; var Login=document.getElementById('Login'); Login.style.left=(Wr.offsetWidth-300)/2; Login.style.top=200; } </script> </head> <body style='margin:0 0 0 0'> <img onclick='Click()' src='http://notepad-plus.sourceforge.net/commun/images/npp.animated.logo.gif'/> </body> </html>