如何在 html/javascript 中实现登录弹出窗口
Posted
技术标签:
【中文标题】如何在 html/javascript 中实现登录弹出窗口【英文标题】：How to implement login popup in html/javascript 【发布时间】：2014-01-09 19:43:22 【问题描述】：基本上，我想创建一个登录弹出窗口，就像许多路由器必须访问设置页面一样：
是否可以在 html 文件上实现此功能，还是仅用于基于服务器的访问？
【问题讨论】：
确定你可以用html创建一个，你可能也想用php。 查看模态窗口 有没有办法在图片中获得准确的弹出窗口？即它基于浏览器的弹出窗口没有样式？ 【参考方案1】：您需要的是在您的 HTML 中定义的基于表单的身份验证。像这样的：
<form method="post" action="/login">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="Log In">
</form>
您需要一个服务器来处理 POST 操作并执行身份验证。
【讨论】：
【参考方案2】：您可能应该阅读以下内容：
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 不能使用类似密码的输入来调用提示窗口。
统一更新： 这个问题得到了回答，并牢记作者对主要帖子的以下评论：
有没有办法在图片中获得确切的弹出窗口？即它的一个 基于浏览器的弹出窗口没有样式？
我从来没有说过，不能用 js+html 创建类似样式的弹出窗口。答案是调用确切的弹出窗口。
【讨论】：
【参考方案3】：实际上，您可以“随时”在客户端使用 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>我还解决了在不刷新的情况下将 vars 从 JavaScript 发送到 PHP 的问题，到目前为止它工作得很好，加载了整个基于 SQL 查询的网站，几乎没有页面刷新（这让我有更重的标题动画，字体和其他东西，一旦加载一次）。
【讨论】：
以上是关于如何在 html/javascript 中实现登录弹出窗口的主要内容，如果未能解决你的问题，请参考以下文章