javascript - 在索引 html 顶部弹出登录表单

Question

• 我有 html 和 CSS 设计要求， 在我的网站中，用户无需登录即可访问少数组件，如果用户尝试访问任何需要登录身份验证的功能，则必须在现有页面顶部嵌入一个小窗口，并且必须模糊所有剩余功能(用户登录后才能访问).. 询问用户登录详细信息...我正在添加一个示例图像以供引用....有人建议我如何实现这一目标..... 谢谢。

Answer 1

您可以在这里找到类似的问题:How to implement login popup in html/javascript

您可以使用 javascript 来显示/隐藏登录表单

<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>

和形式:

<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> 

一旦你获得弹出式登录，然后自定义它/添加 php 或任何你需要的。