Basically, I want to create a login popup like the one that a lot of routers have to get access to the setup page:
基本上,我想创建一个登录弹出窗口,就像许多路由器必须访问设置页面一样:
is it possible to implement this on an html file at all or is it only for server based access?
是否可以在html文件上实现这一点,还是仅用于基于服务器的访问?
3 个解决方案
#1
5
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.
1您可以使用特殊标题调用此弹出窗口。
2 You can invoke this popup only before page starts loading.
2您只能在页面开始加载之前调用此弹出窗口。
3 You can't do this using html+js only.
3您不能仅使用html + js执行此操作。
4 You can't invoke prompt windows with password-like inputs with pure js.
4您无法使用纯js调用类似密码的输入的提示窗口。
UPD: That question was answered, having the following comment from author to main post in mind:
UPD:这个问题得到了回答,从作者到主要帖子的评论如下:
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.
我从来没有说过,不能用js + html创建SIMILAR样式的弹出窗口。答案是关于调用确切的弹出窗口。
#2
3
Actually, you CAN do it with HTML + JavaScript on client-side at "any moment" without refreshing the page...
实际上,您可以在“任何时刻”在客户端使用HTML + JavaScript执行此操作而无需刷新页面...
<!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).
我还解决了将vars从JavaScript发送到PHP而不刷新的问题,到目前为止工作得很好,加载整个基于SQL查询的网站几乎没有页面刷新(这使得我有更重的标题动画,字体和其他东西,一旦加载一次)。
#3
0
What you need is a form based authentication defined in your HTML. Something like this:
您需要的是HTML中定义的基于表单的身份验证。像这样的东西:
<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.
并且您需要服务器来处理POST操作,并执行身份验证。
#1
5
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.
1您可以使用特殊标题调用此弹出窗口。
2 You can invoke this popup only before page starts loading.
2您只能在页面开始加载之前调用此弹出窗口。
3 You can't do this using html+js only.
3您不能仅使用html + js执行此操作。
4 You can't invoke prompt windows with password-like inputs with pure js.
4您无法使用纯js调用类似密码的输入的提示窗口。
UPD: That question was answered, having the following comment from author to main post in mind:
UPD:这个问题得到了回答,从作者到主要帖子的评论如下:
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.
我从来没有说过,不能用js + html创建SIMILAR样式的弹出窗口。答案是关于调用确切的弹出窗口。
#2
3
Actually, you CAN do it with HTML + JavaScript on client-side at "any moment" without refreshing the page...
实际上,您可以在“任何时刻”在客户端使用HTML + JavaScript执行此操作而无需刷新页面...
<!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).
我还解决了将vars从JavaScript发送到PHP而不刷新的问题,到目前为止工作得很好,加载整个基于SQL查询的网站几乎没有页面刷新(这使得我有更重的标题动画,字体和其他东西,一旦加载一次)。
#3
0
What you need is a form based authentication defined in your HTML. Something like this:
您需要的是HTML中定义的基于表单的身份验证。像这样的东西:
<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.
并且您需要服务器来处理POST操作,并执行身份验证。