div hidden layer login box and use ajax to write cookies experience

I recently made a popular hidden directory page. I used ajax during the login process, but strangely, the program terminated for no reason when the cookies were added. I was depressed... The tracking was fruitless, and the online search was fruitless. I was helpless. There are only cookies borrowed from javascript. The user login process is to return the correct mark and the logged-in username ID after the ajax verification is completed, so that this effect can be achieved in javascript. This login box completely imitates the login mode known by Baidu. The only difference is that the login box known by Baidu calls a page. In fact, it just uses an iframe, which is basically similar. The entire login process code is posted here: Front page:

< p onClick ="sAlert('login','login');" > < asp:Literal ID ="litStatus" Text ="Login" runat ="server" ></ asp:Literal ></ p > < p onClick ="logout();" > < asp:Literal ID ="litLoginout" Visible =false Text ="Exit" runat ="server" >< / asp:Literal ></ p >

JavaScript related programs:

function sAlert(str,stitle) { var msgw,msgh,bordercolor; msgw = 300 ; // Width of prompt window msgh = 200 ; // Height of prompt window titleheight = 25 // Height of prompt window title bordercolor = " #78B664 " ; // Border color of prompt window var sWidth,sHeight; sWidth = document.body.offsetWidth; // Page width in browser working area sHeight = screen.height; // Screen height (vertical resolution) //

Background layer (the size is the same as the effective area of the window, that is, when the dialog box pops up, the background is displayed as radial transparent gray) var bgObj = document.createElement( " div " ); // Create a div object (background layer) // Define div Attribute, which is equivalent to // <div id="bgDiv" style="position:absolute; top:0; background-color:#777; filter:progid:DXImagesTransform.Microsoft.Alpha(style=3,opacity=25, finishOpacity=75); opacity:0.6; left:0; width:918px; height:768px; z-index:10000;"></div> bgObj.setAttribute( ' id ' , ' bgDiv ' ); bgObj.style. position = " absolute " ; bgObj.style.top="

0";

bgObj.style.background="#777";

bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=10,finishOpacity=75";

bgObj.style.opacity="1";

bgObj.style.left="0";

bgObj.style.width=sWidth + "px";

bgObj.style.height=sHeight*2 + "px";

bgObj.style.zIndex = " 10000 " ; document.body.appendChild(bgObj); // Add the div object within the body var msgObj = document.createElement( " div " ) // Create a div object (prompt box layer) // Define div attributes, which is equivalent to // <div id="msgDiv" align="center" style="background-color:white; border:1px solid #336699; position:absolute; left:50%; top: 50%; font:12px/1.6em Verdana,Geneva,Arial,Helvetica,sans-serif; margin-left:-225px; margin-top:npx; width:400px; height:100px; text-align:center; line- height:25px; z-index:100001;"></div> msgObj.setAttribute("id",

"msgDiv");

msgObj.setAttribute("align","center");

msgObj.style.background="white";

msgObj.style.border="1px solid " + bordercolor;

msgObj.style.position = "absolute";

msgObj.style.left = "50%";

msgObj.style.top = "20%";

msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";

msgObj.style.marginLeft = "-225px" ;

msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";

msgObj.style.width = msgw + "px";

msgObj.style.height =msgh + "px";

msgObj.style.textAlign = "center";

msgObj.style.lineHeight = " 25px " ;

msgObj.style.zIndex = " 10001 " ; var title = document.createElement( " h4 " ); // Create an h4 object (prompt box title bar) // Define the attributes of h4, which is equivalent to / / < h4 id="msgTitle" align="right" style="margin:0; padding:3px; background-color: #336699; filter:progid:DXImageTransform.Microsoft.Alpha(startX=20, startY =20, finishX =100, finishY=100,style=1,opacity=75,finishOpacity=100); opacity: 0.75; border:1px solid #336699; height:18px; font:12px Verdana,Geneva,Arial, Helvetica,sans-serif; color:white; cursor:pointer;" οnclick="">Close</h4> title.setAttribute(

"id","msgTitle");

title.setAttribute("align","right");

title.style.margin="0";

title.style.padding="3px";

title.style.background=bordercolor;

title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";

title.style.opacity="0.75";

title.style.border="1px solid " + bordercolor;

title.style.height="18px";

title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";

title.style.color="white";

title.style.cursor="pointer";

title.innerHTML="关闭";

title.onclick=removeObj;

var button= document.createElement( " input " ); // Create an input object (prompt box button) // Define the attributes of input, which is equivalent to // <input type="button" align="center" style="width: 100px; align:center; margin-left:250px; margin-bottom:10px;" value="Close"> button.setAttribute( " type " , " button " ); button.setAttribute( " value " , " Close " ) ; button.style.width = " 60px " ; button.style.align="center"

;

button.style.marginLeft = " 250px " ;

button.style.marginBottom = " 10px " ;

button.style.background = bordercolor;

button.style.border = " 1px solid " + bordercolor;

button.style.color = " white " ;

button.onclick = removeObj;

var button1 = document.createElement( " input " ); // Create an input object (prompt box button) // Define the attributes of input, which is equivalent to

button1.setAttribute("type","button");

button1.setAttribute("value","登录");

button1.style.width="60px";

button1.style.align="center";

button1.style.marginLeft="250px";

button1.style.marginBottom="10px";

button1.style.background=bordercolor;

button1.style.border= " 1px solid " + bordercolor;

button1.style.color = " white " ;

button1.onclick = login;

function removeObj() { // The event triggered by clicking the title bar document.body.removeChild(bgObj); // Remove the background Layer Div document.getElementById( " msgDiv " ).removeChild(title); // Remove the title bar of the prompt box document.body.removeChild(msgObj); // Remove the prompt box layer } function login() { var strUserName =

document.getElementById("username").value;

var strPass=document.getElementById("pass").value;

test.UserLogin(strUserName,strPass,loginUser_callback);

}

function loginUser_callback(response)

{

if(response.value=="0")

{

alert("登录成功！");

removeObj();

SetCookie ("userID", "3")

window.location.reload();

} else { alert( " Login failed! " ); } }

document.body.appendChild(msgObj);//Add prompt box div object msgObj in the bodydocument.getElementById("msgDiv").appendChild(title);//var txt=document.createElement("p");//Create a p object (prompt box prompt information)in the prompt box div.//Define the attributes of p, which is equivalent to//<p style= "margin:1em 0;" id="msgTxt">Test effect</p>txt.style.margin="1em 0"txt.

" id " , " msgTxt " );

txt.innerHTML = " <strong>International diabetes registered users please log in directly</strong></br></br>Username:<input id='username' width='170 ' name='username' /><br></br>Password:<input id='pass' type='PassWord' width='170' name='pass' /></ br></br> " ; // Comes from the parameter value when the function is called document.getElementById( " msgDiv " ).appendChild(txt); // Add the prompt information object txt in the prompt box div document.getElementById( " msgDiv " ).appendChild(button1); }

function SetCookie(name,value) // Two parameters, one is the name of the cookie and the other is the value

{

var Days = 30; //此 cookie 将被保存 30 天

var exp = new Date(); //new Date("December 31, 9998");

exp.setTime(exp.getTime() + Days*24*60*60*1000);

document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();

}

function getCookie(name)//取cookies函数

{

var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));

if(arr != null) return unescape(arr[2]); return null;

}

function delCookie(name)//删除cookie

{

var exp = new Date();

exp.setTime(exp.getTime() - 1);

var cval=getCookie(name);

if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();

}

function logout()

{

delCookie("userID");

window.location.reload();

}

CS layer, ajax execution method:

[Ajax.AjaxMethod]

public string UserLogin( string userName, string passWord)

{

TNB.DAL.CommonDAL dal = new TNB.DAL.CommonDAL();

TNB.Model.CommonModel model = new TNB.Model.CommonModel();

model.Fields = "*";

model.Where = "UserName='" + userName + "' and UserPass='" + System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(passWord, "MD5") + "'";

model.Tables = "Users";

DataSet ds = dal.GetList(model);

if (ds.Tables[0].Rows.Count > 0)

{

return "0";

}

else

{

return "1";

}

div hidden layer login box and use ajax to write cookies experience

Guess you like