How to implement login popup in html/javascript

后端未结

关注

 3  1068

Basically, I want to create a login popup like the one that a lot of routers have to get access to the setup page: $\"Log$

相关标签:

3条回答

梦如初夏

2020-12-16 19:04

Actually, you CAN do it with HTML + JavaScript on client-side at "any moment" without refreshing the page...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#popupbox{
margin: 0; 
margin-left: 40%; 
margin-right: 40%;
margin-top: 50px; 
padding-top: 10px; 
width: 20%; 
height: 150px; 
position: absolute; 
background: #FBFBF0; 
border: solid #000000 2px; 
z-index: 9; 
font-family: arial; 
visibility: hidden; 
}
</style>
<script language="JavaScript" type="text/javascript">
function login(showhide){
if(showhide == "show"){
    document.getElementById('popupbox').style.visibility="visible";
}else if(showhide == "hide"){
    document.getElementById('popupbox').style.visibility="hidden"; 
}
}
</script>
</head>
<body>

<div id="popupbox"> 
<form name="login" action="" method="post">
<center>Username:</center>
<center><input name="username" size="14" /></center>
<center>Password:</center>
<center><input name="password" type="password" size="14" /></center>
<center><input type="submit" name="submit" value="login" /></center>
</form>
<br />
<center><a href="javascript:login('hide');">close</a></center> 
</div> 

<p>
Some text
</p>
<p>
Some more text
</p>
<p><a href="javascript:login('show');">login</a></p>
</body>
</html>

I also solved the issue about sending vars from JavaScript to PHP without refreshing, and it's working just fine so far, loading an entire SQL query-based website with virtually no pages refresh (which allowed me to have a heavier header animation, fonts and other stuff, once it's loaded just one time).

0 讨论(0)

南方客

2020-12-16 19:08

You should probably read this:

http://en.wikipedia.org/wiki/Basic_access_authentication

and this:

http://www.php.net/manual/en/features.http-auth.php

In short words:

1 You can invoke this popup using special headers.

2 You can invoke this popup only before page starts loading.

3 You can't do this using html+js only.

4 You can't invoke prompt windows with password-like inputs with pure js.

UPD: That question was answered, having the following comment from author to main post in mind:

Is there a way to get the exact popup in the picture? i.e its a browser based popup not styled?

I never stated, that one can not create SIMILAR styled popup with js+html. The answer was about invoking the exact popup.

0 讨论(0)
发布评论:

提交评论
- 加载中...
误落风尘

2020-12-16 19:21
What you need is a form based authentication defined in your HTML. Something like this:
```
<form method="post" action="/login">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="Log In">
</form>
```
and you would need a server to handle the POST action, and perform authentication.
0 讨论(0)
发布评论:

提交评论
- 加载中...