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

• 我有html和CSS的设计要求， 在我的网站中，用户无需登录即可访问少数组件，如果用户试图访问任何需要登录验证的功能，则必须在现有页面顶部嵌入一个小窗口，并且必须模糊所有剩余功能（在用户登录之前无法访问）。。正在询问用户登录详细信息。。。我正在添加一个示例图像以供参考。。。。有人建议我如何做到这一点。。。。。 多谢各位

如果是HTML：

<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">

---

您可以在这里找到类似的问题：

您可以使用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>

函数登录（显示隐藏）{
如果（显示隐藏=“显示”）{
document.getElementById（'popubox'）.style.visibility=“visible”；
}else if（showhide==“hide”）{
document.getElementById（'PopuBox'）.style.visibility=“hidden”；
}
}

及表格:

<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或任何你需要的内容。

请重新组织你的问题，因为不清楚你的问题是什么。您还需要提供显示您迄今为止尝试的代码。是否要禁用在该登录页面外单击？是，我要禁用外部登录页面。。。我还想知道如何在欢迎页面的顶部弹出登录页面…很抱歉。。。我只是想知道设计理念。。。我是css新手，所以我没有尝试过任何@hiddenhobes编码

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