如何在html/javascript中实现登录弹出窗口

use*_*607 6 html javascript login

基本上,我想创建一个登录弹出窗口,就像许多路由器必须访问设置页面一样: 登录弹出窗口

是否可以在html文件上实现这一点,还是仅用于基于服务器的访问?

hal*_*gan 6

你应该读这个:

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

还有这个:

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

简而言之:

1您可以使用特殊标题调用此弹出窗口.

2您只能在页面开始加载之前调用此弹出窗口.

3您不能仅使用html + js执行此操作.

4您无法使用纯js调用类似密码的输入的提示窗口.

UPD: 这个问题得到了回答,从作者到主要帖子的评论如下:

有没有办法在图片中获得确切的弹出窗口?即它的基于浏览器的弹出窗口没有样式?

我从来没有说过,不能用js + html创建SIMILAR样式的弹出窗口.答案是关于调用确切的弹出窗口.


小智 5

实际上,您可以“随时”在客户端使用 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>
Run Code Online (Sandbox Code Playgroud)

我还解决了关于将变量从 JavaScript 发送到 PHP 而不刷新的问题,到目前为止它工作得很好,加载了整个基于 SQL 查询的网站,几乎没有页面刷新(这让我有更重的标题动画、字体和其他东西,一旦加载一次)。